Menu
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
203
The :checked CSS pseudo-class selector represents any radio ( <input type="radio"> ), checkbox ( <input type="checkbox"> ), or option ( <option> in a <select> ) element that is checked or toggled to an on state.
The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.
A pseudo-class consists of a colon ( : ) followed by the pseudo-class name (e.g., :hover ). A functional pseudo-class also contains a pair of parenthesis to define the arguments (e.g., :dir() ). The element that a pseudo-class is attached to is defined as an anchor element (e.g., button in case button:hover ).
A checkbox cannot be checked in CSS, unfortunately. It relies on the checked attribute of the input element, and attributes cannot be modified via CSS. Alternatively, you could look into a JavaScript solution, but of course the best way would be to edit the HTML directly.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
