Home > Article > Web Front-end > css custom checkbox
css custom checkbox
- WBOYOriginal
- 2016-06-24 11:41:411005browse
A virgin coming to CSDN asks:
The story started because I wanted to simply use CSS to customize the style of a checkbox, and then I did this:
<input id = "my-checkbox" type = "checkbox"/><label for = "my-checkbox"></label>
input[type="checkbox"]{opacity:0;}input[type="checkbox"] + label:before{background:#d5d5d5; content:""; height: 15px; width: 15px; position: absolute; top: 0; left: 0; } I wrote the above method based on the iCheck plug-in. The BUT instructor said that my method is not good (fall!)
He said: ID abuse will make it difficult to check for duplicate IDs in the future, so he asked me to wrap the d5fd7aea971a85678ba271703566ebfd in 2e1cf0710519d5598b1f0f14c36ba674.
I suddenly felt that it made sense
. . . . . . .
Later I found out that I couldn’t simply use CSS to implement the input style. (Of course js is easy to solve.) Where does the label come from the [:checked] pseudo-class, right?
Is there any expert who can help me solve this problem?
Reply to discussion (solution)
Can you just add a span
<style type="text/css">input[type="checkbox"]{opacity:0;}input[type="checkbox"] + span:before{background:#d5d5d5; content:" "; }input[type="checkbox"]:checked + span:before{background:#ff0000; }</style></head><body><label><input type="checkbox"/><span></span>xxxxxxxxxxxxxxxxxxx</label>
The problem is indeed solved, thank you!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Ask about padding in CSS_html/css_WEB-ITnoseNext article：Ask about padding in CSS_html/css_WEB-ITnose