The checkbox may be a common html element in websites, but most people are not satisfied with its default style. This article talks about how to achieve the beautification effect of input checkbox control style.
Resource website Encyclopedia https://55wd.com
Scheme 1: pure css method
Both radio buttons and check buttons have selected and unchecked statuses. Setting the default styles for these two buttons is a little more complicated. In this paper, the user-defined style is realized by using the checked selector and other expressions. Example: use the: checked selector to simulate the implementation of the check box style.
<meta charset="utf-8"> <style type="text/css"> form { border: 1px solid #ccc; padding: 20px; width: 300px; margin: 30px auto; } .wrapper { margin-bottom: 10px; } .box { display: inline-block; width: 20px; height: 20px; margin-right: 10px; position: relative; border: 2px solid orange; vertical-align: middle; } .box input { opacity: 0; } .box span { position: absolute; top: -10px; right: 3px; font-size: 30px; font-weight: bold; font-family: Arial; -webkit-transform: rotate(30deg); transform: rotate(30deg); color: orange; } input[type="checkbox"] + span { opacity: 0; } input[type="checkbox"]:checked + span { opacity: 1; } </style> <form action="#"> <div class="wrapper"> <div class="box"> <input type="checkbox" checked="checked" id="username" /><span>√</span> </div> <label for="username">I am selected</label> </div> <div class="wrapper"> <div class="box"> <input type="checkbox" id="userpwd" /><span>√</span> </div> <label for="userpwd">I am not selected</label> </div> </form>
There is a problem with this method: you cannot select a box when you click it. You must click text to select it. The
The effect is as follows:
Scheme 2: cooperate with js solution
Principle: a layer is set outside the label and input The custom checkbox is positioned relative to the parent element.
Input is absolutely positioned in the upper left corner, and label is also absolutely positioned in the upper left corner, covering the input box. Simulate the unselected state by setting padding left and background image for the label. Add one when selected The right class changes the background image to the selected background image. Through the js click event, when the label is clicked, it switches between the selected and unselected states.
Use pictures:
The codes are as follows:
<meta charset="utf-8"/> <style type="text/css"> .custom-checkbox{ border:1px solid red; position:relative; height:30px; } .custom-checkbox input{ position:absolute; } .custom-checkbox label{ padding-left:20px; position:absolute; top:-1px; left:0; background:url(images/bg-unchecked.png) no-repeat top 4px left 3px; } .custom-checkbox label.right{ background:url(images/bg-checked.png) no-repeat top 2px left 3px; } </style> <body> <div class="custom-checkbox"> <input type="checkbox" id="test"/><label for="test">Have read and agreed to the relevant terms of service</label> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/JavaScript"> $('.custom-checkbox label').click(function(){ if($(this).hasClass('right')){ $('.custom-checkbox label').removeClass("right"); }else{ $('.custom-checkbox label').addClass("right"); } }); </script> </body>
Problem: clicking too often will double-click the selected text, affecting the user experience. The
Solution:
<label for="test" onselectstart="return false;" style="-moz-user-select:none;">Have read and agreed to the relevant terms of service</label>
The effect is as follows:
Scheme 3: cooperate with js simplified version
In the scheme of 2, it is a bit troublesome to use two times of absolute positioning, because the check box of <input type= "checkbox" > is used. If the requirements are not so complex, simply use the <i> tag to simulate the check box to achieve the same effect.
html:
<label class="agree-label" onselectstart="return false;" style="-moz-user-select:none;"> <i class="cus-checked"></i>agree <a href=":;" target="_blank">XX terms of service</a> </label>
css:
.agree-label { display: inline-block; font-size: 18px; } .agree-label i { display: inline-block; width: 21px; height: 22px; margin-bottom: -4px; margin-right: 6px; background: url(images/checkedbox.png) no-repeat; } .agree-label i.cus-checked { background-position: 0 -22px; }
js:
$('.agree-label').click(function() { if ($('.agree-label i').hasClass('cus-checked')) { $('.agree-label i').removeClass("cus-checked"); } else { $('.agree-label i').addClass("cus-checked"); } });