Original JavaScript Custom Input [Type = RADIO] Example

This example describes the effect of native JavaScript custom input [type = radio]. Share to everyone for reference, specifically:

Find the most simple scheme only using CSS3

         Input [type = "radio"] + label :: before {content: "; / * Do not wrap space * / display: inline-block; vertical-align: middle; Font-size: 18px; Width: 10px; Height: 10px; Margin-Right: 10px; Border-Radius: 50%; Border: 2px Solid # 01cd78; Text-Indenter: 15px; line-height: 1; Padding: 4px; } input [type = "radio]: checked + label :: before {background-color: # 01cd78; background-clip: content-box;} infut [type =" radio] {Position: absolute; clip: Rect 0, 0, 0, 0);}    Female 
In the most recent development, or in previous development, the FORM form element is often used in the previous development. The design scheme given by the UI is absolutely not the native Radio style, facing this scenario, customizing the RADIO effect becoming a solution. Directly, as follows


Custom Radio and Checkbox
 #Ceshi Label INPUT {Display: None;} #ceshi label span {display: inline-block; width: 18px; height: 18px; Border-Radius: 50%; Border: 2px solid #ddd; box-sizing: border-box; position: relative; top: 3px; margin-right: 6px;} #ceshi label span.active {border: 3px solid red; }     This is the test 1      This is test 2        1), the function mount the prototype object is HTMLElement, the actual prototype object is written to Object is also possible   2), add or delete class to write their own, you can also use the interface classList HTML5, and add or delete categories < len.length; i++) {
    3) to avoid return to the page, radio will still be selected, will need to finish loading the page selected radio set to false, if the business which requires a separate check, you need to customize the   interested friends can use 
online HTML / CSS / JavaScript code running tool : http: //tools.jb51.net/code/HtmlJsRun test the code above operating results.

More about JavaScript Related Contents View this Topic: “JavaScript Operation DOM Skation Summary”, “JavaScript Page Element Operation Skills Summary”, “JavaScript Event Information and Skills”, “JavaScript Find Algorithm Tips Summary

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment