about 7 years ago
Pseudo elements are useful for changing the background colour of the checkbox and radio buttons. We can use :before and :after to change the colour or appearance of the checkboxes. It can all work with css styling.
Example:
<div class="container"> <div class="section"> <p> <input type="checkbox" id="b1" name="a"> <label for="b1">First</label> </p> <p> <input type="checkbox" id="b2" name="a"> <label for="b2">Second</label> </p> <p> <input type="checkbox" id="b3" name="a"> <label for="b3">Third</label> </p> </div> </div>
CSS:
.box { background: #cccccc; color: #fff; width: 350px; padding: 5px; margin: 5px auto; } p { margin: 5px 0; padding: 0; } 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; }
Starting with Chrome version 45, NPAPI is no longer supported for Google Chrome. For more information, see Chrome and NPAPI (blog.chromium.org).
Firefox and Microsoft Internet Explorer are recommended browsers for websites using java applets.
Chrome Version Support
Are you sure, you want to delete this comment?
Sign up using
0 Comment(s)