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 
Male
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

原生javascript自定义input[type=radio]效果示例

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++) {
      len[i].getElementsByTagName("input")[0].checked=false;//设置不选中
      len[i].onclick=function(){
         nativeSelfRadio(this);
      }
    }
    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
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment