Jump to content

Custom CSS gravityforms radio buttons

Recommended Posts


I got stuck with my website while trying to make it responsive and avoid to write endless lines of code.

I am customising the radio buttons by showing  buttons instead of the radios.  What I am trying to do is displaying  inline custom buttons. If I use a fixed width no problem, but as I want it responsive I need to use width: auto or max-width. As soon as I set this parameters the button loses the width property and set the width at the minimum. The problem doesn't exist if the elements are displayed  in block or if I use a fixed width.

Hope you can help

Here the CSS  that I am using:

#field_2_23 ul.gfield_radio li input[type="radio"] + label {
    border: 1px solid #d1d1d1;
    color: #808080;
    background-color: #ffffff;
    max-width: 134px !important;
    height: 50px;
    border-radius: 5px;
    margin-left: 3px;
    text-align: center;
    padding-top: 14px;

#gform_wrapper_2 ul.gfield_radio li input[type="radio"]:checked + label {
    border: 1px solid #b0ca1f;
    color: white;
    background-color: #b0ca1f;
    font-weight: normal !important; 


Thank you in advance for any help.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...