Adjust label of radio buttons

  • Resolved rotertal

    (@rotertal)


    7 months ago

    Hi,

    I modified the radio buttons (bigger squares) but now I’m not able to adjust the labels (they stick on the bottom):

    fbuilder .cff-radiobutton-field .dfield input[type=”radio”] {

    width: 25px !important;
    height: 25px !important;
    -webkit-appearance: none !important; 
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #f7f7f8 !important; 
    border-radius: 3px !important;
    border: 2px solid #f7f7f8 !important;
    margin-right: 10px; /* Abstand zwischen Radiobutton und Label */

    } fbuilder .cff-radiobutton-field .dfield input[type=”radio”]:checked {

    background-color: #f4e784 !important; 
    border-color: #f4e784 !important;

    } fbuilder .cff-radiobutton-field .dfield {

    display: flex;
    align-items: center; 
    justify-content: flex-start;

    } fbuilder .cff-radiobutton-field input[type=”radio”] {

    width: 25px;
height: 25px;
appearance: none;
background-color: #f7f7f8;
border-radius: 3px;
border: 2px solid #e8f0fe;
margin-right: 10px;

    } fbuilder .cff-radiobutton-field input[type=”radio”]:checked {

    background-color: #f4e784;
border-color: #f4e784;

    } fbuilder .cff-radiobutton-field .dfield label {

    margin: 0;
padding: 0;
font-family: 'Poppins Regular' !important;
color: #3c4043; 
font-size: 1rem;

    }

    I’ve tried a lot but nothing changes … thank you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @rotertal

    Thank you very much for using our plugin. If you want to modify the choices’ texts only, you can enter the style definition:


    #fbuilder .cff-radiobutton-field .dfield input+span {
       margin: 0;
       padding: 0;
       font-family: 'Poppins Regular' !important;
       color: #3c4043; 
       font-size: 1rem; 
    }

    Best regards.

    Thread Starter rotertal

    (@rotertal)

    Hi,

    thanks for your input, i’ve also adressed that (display: flex, align: center, line-heigt etc) but nothing changes, it always sticks to the bottom …

    Plugin Author codepeople

    (@codepeople)

    Hello @rotertal

    Please provide the link to the page containing the form to check the styles you are applying to the radio button components.

    Best regards.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adjust label of radio buttons’ is closed to new replies.