Home > Developer > JavaScript
Form elements-checkbox style beautification, form checkbox Style
I. background
Design lions and children's shoes always design a variety of tall shoes, such as the effect of the local tyrants.
The check box before "read and agree to relevant Terms of Service" in this figure has a golden border, which is a golden check box. Next, let's talk about how to achieve this effect.
Ii. solution 1. pure css SolutionIn css3 selector (3), a selector [: checked] selector is introduced.
Both the radio button and the check button are in the selected or unselected status. The default style of the buttons to be set is slightly more complex. In this paper, the checked selector is used with other expressions to customize the style.
For example, the checked selector is used to simulate 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>View CodeSimulate a selected or unselected style.
If there is no style,
After adding a style, the effect is as follows.
In actual development, I try to use this method.
This method has a problem: You cannot select it when you click the box. You must click the text to select it.
This is definitely intolerable in practical applications. The second method is recommended in practical applications.
2. Working with js SolutionsImages used:
Principle: The label and input form a layer. custom-checkbox as the parent element for relative positioning.
The input is definitely located in the upper left corner, and the label is also definitely located in the upper left corner, which overwrites the input square. You can set padding-left and background image for the label to simulate the unselected status. Add a. right background image to change the background image to the selected background image.
With the js click event, when the label is clicked, the status switches between selected and unselected.
<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"> already read and agree to the 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: The clicking frequency is too high. Double-click the selected text to affect the user experience.
Solution:
<Label for = "test" onselectstart = "return false;" style = "-moz-user-select: none;"> read and agree to the terms of service </label>
Effect:
Iii. SummaryThe single-sheet style and checkbox are similar in principle. The above method is a simulated implementation.
As I mentioned in the usage of: before AND: after pseudo elements, as early as 10 years ago, we used: before AND: after to implement multi-background images, currently, the multi-Background of css3 has become a standard. Our simulation implementation of the checkbox style may push it into a standard, which is our contribution to future generations, making their work easier.
Another thing I want to talk about is to promote the development of front-end technologies, including not only front-end colleagues, but also our lovely designers. If there is only a front-end, we will stay on the feasibility of the existing technology to do some conservative results, but with the designer's "perfectionist", let us open our minds and challenge ourselves, promote technology to the next level.
Starof, the author of this article, is constantly learning and growing because of the changing knowledge. The content of this article is also updated from time to time. To avoid misleading readers and facilitate tracing, Please repost the Source: Ghost.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
