Reputation: 331
I'm trying to change the size,color,etc... of a checkbox using CSS. I have everything formatted the way I want aside from when the box is checked. When the box is checked, the check/tick mark does not appear and nothing seems to happen. However, I know it works otherwise because I can set the background color to change, and it works then.
Does adding "content: '✔';" do anything in the CSS as far as what I'm trying to accomplish, or am I using it incorrectly?
For example:
input[type=checkbox]:checked {
content: '✔';
background-color:white;
}
Here's a fiddle that demonstrates the background color of the checkbox changing.
Here's another fiddle of what I'm trying to do by using a check mark when the box is checked.
Edit - I'm using chrome and that seems to be the issue. I checked in firefox and it works
Knowing this, what can I do to accomplish what I have described?
Upvotes: 4
Views: 19419
Reputation: 12931
As Josh Crozier stated content
only works for :before
and :after
. And you're trying to add it to the input
. You can create a check mark using css transitions for a nicer look:
HTML
<div class="custom">
<input type="checkbox" value="None" id="checkmark" name="check" />
<label for="checkmark"></label>
</div>
CSS
input[type=checkbox] {
visibility: hidden;
}
.custom {
position: relative;
}
.custom label {
cursor: pointer;
position: absolute;
top: 0;
-webkit-appearance: none;
border: double 2px #8C8C8C;
background-color:white;
color:#FFF;
white-space: nowrap;
width:35px;
height:35px;
}
.custom label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 14px;
height: 8px;
background: transparent;
top: 8px;
left: 8px;
border: 3px solid #000;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.custom label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.custom input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
Upvotes: 1
Reputation: 241278
The content
property currently only applies to pseudo elements such as :before
/:after
.
Checkbox elements are notoriously difficult to style (not all browsers allow you to specify a height
/width
; also, they are self enclosed elements, meaning that they cannot contain pseudo elements.
Therefore, the most common approach for creating custom checkboxes is to hide the input
/checkbox element and style a succeeding label
element via a pseudo element. For instance:
<input type="checkbox" id="checkbox1">
<label for="checkbox1"></label>
Utilize the adjacent sibling combinator, +
, in order to change the styling of the custom label
element/pseudo element:
input[type="checkbox"]:checked + label {}
This will get you started. Style accordingly.
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
display: inline-block;
border: 1px solid #000;
width: 30px;
height: 30px;
position: relative;
}
input[type="checkbox"]:checked + label:after {
content: '✔';
display: inline-block;
font-size: 1.6em;
}
<input type="checkbox" id="checkbox1">
<label for="checkbox1"></label>
Upvotes: 9