-
ssdform14Asked on November 15, 2016 at 6:00 PM
I would like to change the background color when a checkbox is selected. I have tried to isolate the element down to the specific box but I have not yet been successful.
-
liyamReplied on November 15, 2016 at 8:25 PM
Hello ssdform14,
If what you want is to make this on the checkbox itself, here's a sample solution:
input[type="checkbox"] {
display: none;
}label {
cursor: pointer;
}input[type="checkbox"] + label:before {
border: 1px solid #7f83a2;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 16px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 16px;
}input[type="checkbox"]:checked + label:before {
background: #3d404e;
color: #666;
content: "\2713";
text-align: center;
}input[type="checkbox"]:checked + label:after {
font-weight: bold;
}Reference: this link.
If you have questions, please let us know.
Thanks.
-
ssdform14Replied on November 16, 2016 at 9:44 AMHi,
I received an email response that had no content. My question is how to
target the CSS for the :checked state on a checkbox. Subject line:
"Re: styling pseudo element input[type="checkbox"]:checked"
Can you resend the response or direct me to where I might see it on the
Forum?
Thanks, Kim
--
Kim Ericsson
406-546-4243
... -
Elton Support Team LeadReplied on November 16, 2016 at 11:27 AM
Which specific part of the checkbox you'd like to change its background? My colleague's code will change the checkbox background when it is checked.
Here's what it does:
When not checked:
When checked:
Basically, you will have to inject the CSS codes provided by my colleague into your form by following this guide http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.
If you also want to change the background of the option label when checked, you can append this.
input[type="checkbox"]:checked + label {
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 22%, #7db9e8 22%);
background: -webkit-linear-gradient(left, #ffffff 22%,#7db9e8 22%);
background: linear-gradient(to right, #ffffff 22%,#7db9e8 22%);
padding-right:10px;
}
Result:
Feel free to change the color values found in the code to your preferences.
If in case you still can't view this response in your email, please check the responses in your thread here https://www.jotform.com/answers/990916.
-
ssdform14Replied on November 16, 2016 at 12:53 PM
Thank you both for your suggestions.
@EltonCris, I'm trying change the background color of the box itself when "checked" or radio button when "selected" not the label. That code is similar to what I tried first, without success.
@Liyam, I noticed your reference myself on Stack Overflow. However, I don't want to do a complete reset of the checkbox CSS already in place.
The form looks good as is. I've just been letting the design get the better of the function. I will try and add some class specificity to the form elements but I'm not going to spend too much time for a small matter.