CODEWITHSUNDEEP
htmlcsscheckbox
user3476345
user3476345

Reputation: 331

Checkmark in checkbox not appearing when changing CSS

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

Answers (2)

jmore009
jmore009

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;
}

FIDDLE

Upvotes: 1

Josh Crozier
Josh Crozier

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 {}

Example Here

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

Related Questions