Okay
  Public Ticket #1528662
Color of radio/checkboxes
Closed

Comments

  • Anne-Laure started the conversation
    April 4, 2018 at 11:07am

    Hello,

    I would like to change the color of checkboxes or radio button in my contact form that appears in grey instead of white. Could you please help my with that ?

    Thank you very much.

  •  8,425
    Tahir replied
    April 4, 2018 at 12:37pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    body[data-fancy-form-rcs="1"] input[type='checkbox']+label {
    color: rgba(255,255,255,0.6)!important;
}
body[data-fancy-form-rcs="1"] input[type='checkbox']+label >span {
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

    Thanks

    ThemeNectar Support Team 

  • Anne-Laure replied
    April 4, 2018 at 1:19pm

    Thank you very much !

    Is it also possible ti change the color of the text. It changes to black after a checkbox is checked.

    THanks a lot.

  •  8,425
    Tahir replied
    April 4, 2018 at 1:29pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    body[data-fancy-form-rcs="1"] input[type='checkbox']:checked+label {
    color: rgba(255, 255, 255, 0.6) !important;
}

    Thanks

    ThemeNectar Support Team 

  • Anne-Laure replied
    April 4, 2018 at 3:06pm

    Thank you very much.

    It works perfectly, but also make the tick of the box higher, not in the box... :/

    Do you have an idea why ? Thank you again.

  •  2,724
    Andrew replied
    April 4, 2018 at 7:40pm

    Hey there,

    Thanks for reaching in,

    Please use this CSS in Salient > General Settings > CSS/Script Related > Custom CSS Code

    body[data-fancy-form-rcs="1"] input[type='checkbox']:checked+label >span:before { left: 2px!important;
    top: 6px!important; }

    Hope this helps,

    Regards

  • Anne-Laure replied
    April 5, 2018 at 4:19pm

    Perfect ! Thank you !

  •  2,724
    Andrew replied
    April 5, 2018 at 8:06pm

    Hey there,

    Thanks for reaching in,

    Awesome. Please be sure to reach in in case you encounter another issue,

    Regards