CODEWITHSUNDEEP
htmlcsscheckboxcss-selectors
amiry jd
amiry jd

Reputation: 27585

:checked pseudo class does not work in Chrome

I'm creating a custom checkbox with this css:

input[type="checkbox"] {
    background: transparent;
    border: inherit;
    width: auto;
}
input[type=checkbox] {
    display: none;
}
input[type=checkbox] + input + label,
input[type=checkbox] + label,
div:not(#foo) > input[type=checkbox] + label,
div:not(#foo) > input[type=checkbox] + input + label {
    cursor: pointer;
    height: 16px;
    padding: 0 0 0 18px;
    background: transparent url(/assets/images/checkbox-unchecked.png) no-repeat left 3px;
}
input[type=checkbox]:checked + input + label,
input[type=checkbox]:checked + label,
div:not(#foo) > input[type=checkbox]:checked + label,
div:not(#foo) > input[type=checkbox]:checked + input + label {
    background: transparent url(/assets/images/checkbox-checked.png) no-repeat left 3px;
}
.ie6 input[type=checkbox],
.ie7 input[type=checkbox],
.ie8 input[type=checkbox] {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

and here is my html markup:

<div class="editor-label">
    <input class="check-box" data-val="true" id="Persistent" name="Persistent" type="checkbox" value="true" />
    <input name="Persistent" type="hidden" value="false" />
    <label for="Persistent">Keep me!</label>
</div>

The input elements are created by @Html.EditorFor(model => model.BooleanProp) in Razor. This code works fine except in Chrome. Actually in Chrome, when we click on checkbox, we will see the effect (by effect I mean changing the background-image for label that shows checkbox is checked or not) after we click on submit bottun. Any idea please?

UPDATE

Here is a demo

Upvotes: 6

Views: 2075

Answers (1)

My Head Hurts
My Head Hurts

Reputation: 37675

I believe that Webkit has issues with chained + selectors that follow pseudo selectors

Swap the chained ... + input + label selectors for ... ~ label.

For example:

div:not(#foo) > input[type=checkbox] ~ label

Upvotes: 6

Related Questions