Support » Plugin: Contact Form by WPForms - Drag & Drop Form Builder for WordPress » CSS style for checkbox background

  • Resolved bgorenb

    (@bgorenb)


    Hello,

    I am trying to style the background of the checkboxes on the contact form.
    I’ve had success by adding CSS to alter the text area background and button, using the code shown below, but nothing I’ve tried for the checkbox area seems to work. I’ve inspected the page and can’t seem to isolate what I should be trying to modify.

    The page in question is: http://proveo4adcs.com/contact-proveo-2/

    Any suggestions?

    /** CONTACT FORM input Textarea **/
    .wpforms-form input, .wpforms-form textarea{
    background-color:rgba(182, 214, 240, 0.39)!important;
    }
    
    /** CONTACT FORM BUTTON COLOR **/
    .wpforms-form button{
    background-color:rgb(8, 152, 166)!important;
    }
    
    /** CONTACT FORM SUBMIT BUTTON **/
    button.wpforms-submit{
    color:#FFFFFF!important;
    background-color:rgb(242, 163, 8)!important;
    }
    
    /** CONTACT FORM SUBMIT BUTTON Hover **/
    button.wpforms-submit:hover{
    color:rgb(255, 255, 255)!important;
    background-color:rgb(8, 168, 191)!important;
    }

    [Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

    • This topic was modified 6 months, 3 weeks ago by  bdbrown.
Viewing 1 replies (of 1 total)
  • Plugin Author Jared Atchison

    (@jaredatch)

    Sure thing. By default checkbox, radio, and select form elements can’t be styled with normal CSS. Using a little CSS3 creativity they can still be tweaked though. Check out the code snippet below.

    
    .wpforms-container input[type=checkbox] {
    	-webkit-appearance: none !important;
    	-moz-appearance: none !important;
    	appearance: none;
    }
    
    .wpforms-container input[type=checkbox]:checked {
    	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADsUlEQVRoQ+2YXU7jMBSFbTcpBSSmgNoXXigboCM20CV0B1NWMGIHMztgB5QdMDtgAwgPUpGoBHSQygMVaioEKg2JRydKqv44ifMDpBJ+tu/9Tu7xzU0oWfBFF5yffAn4qAru7e19I4ScCiGqQojt8/Pzf8i9EBUAvG3bp4SQKqCFEIec84OFEAB4y7LG8G7FOef8e+YFAN40zVl4R4Ou68Wzs7NBZi3kwcPzsntGKW1cXFwcZ1IA4F9fX6VP3hMjhGi2Wq39zAkA/HA4DIR3RXRarVYlUwJ2dna+FQoFFXhHw+XlJc2MAMDrun5KKZV6fvYeoJVeXV0dZEKAB+/1eYWXIzdNs3Zzc/P5XQjwmqYp24YQYhBCau12+++nvwcAn8vlosATtM92u33sVenTLAR4xlgkeLTO6+vr/UmLKQuoVCq7lNK6EOLk9vbWKV/cBXgMZhE8j1Qc1oHvIwsAvJuw6HkwrgjACyGiwju+l+UMrQDg3YSA95ZBKZUGDKoK4CenyggVbHQ6nbHvlSsAeDfhJPxYBGNMWQTgJVNlqAb4/u7ubsr3SgK2trZ23Usmg/didHRdr876cpYK8G9vb87HSCjxxAZKKdc0bc73oQIATymFT4PgvTg8n8/7JgH8aDSK6nnENoQQtW63G9gw5u4A4CcurOoD40tLS3MiAB82VQYkaHS7XanvfSsAeMmFVRXRvL+/H3sV8IpTpSz+VKwggHEF1tfXMQmi126rEkv2wSonQogi3pgxY/Hl5eVA30srUC6Xj9ykCfgTH3V8//DwoPyiHFegXC73FS9tYkq/AEKIRq/XC/W9tAKlUukHIaT5bnThgZu9Xs+33/sdn+pCpVLpJz4UwnOlvoNbllXr9/tTc45Klrk2urm5eUQIwQX8qGVYllU1DMP50xZ1SWehjY2NI/gxarA4+xlj9cfHxz9xzuKM7zBXLBY/ohKHhmE4vwjjrsBpdG1t7T1bKx8MBs7vwSQrdJyGiHe4EwZjLLbvpW006Cmsrq6mWgl82T09PcX2fWQBOAARKVXi8Pn5OZHvYwnAoZWVlaQi+MvLS2LfxxbgiYjZYjHnVIfDYax+72fx0EssO1goFCJXwrbt+mg0SsX3iSrgHc7n88oiMJ6Yppma71MRgCC6rquIwH/MVH2fmgAEyuVyQS3W0DQtdd+nKsAT4dNi65Zlpe771AUgIGNs1k6/bNv+nWRMUDkbqwsFBPZE4MMo8seJCvDsnrQFxGFIdOZLQKLHl8Lh/51VgECHxbTCAAAAAElFTkSuQmCC') !important;
    	background-size: contain !important;
    }
    

    https://cl.ly/2J041T0o110r

    Only thing to note is this may not display in all browsers depending on their support for CSS3.

    Hope that helps 🙂

    • This reply was modified 6 months, 3 weeks ago by  Jared Atchison.
    • This reply was modified 6 months, 3 weeks ago by  bdbrown.
Viewing 1 replies (of 1 total)
  • The topic ‘CSS style for checkbox background’ is closed to new replies.