HTML + CSS

HTML + CSS

As we all know, the default single-choice, multiple-choice, and drop-down controls are really ugly. The following section describes two styles for single-choice, multi-choice, and drop-down controls. First, we will introduce the first one:

1. Implement with CSS + HTML

This method is simple, easy to obtain data, and compatible with mainstream browsers. The disadvantage is that IE8 and the following browsers are not compatible, therefore, the second method is required to be compatible with earlier versions of IE browsers.

First, first look:

The Code is as follows:
 

<Title> </title> <meta content = "text/html; charset = UTF-8 "http-equiv =" Content-Type "/> <style type =" text/css ">/* Check S * // * to hide the input, set the background of the label and replace it with checkbox to customize the label style */. checkbox {width: 100px; height: 80px; float: left ;}. checkbox01 {display: none; width: 30px; height: 30px ;}. checkbox label {display: block; width: 80px; height: 40px; background: url (images/rb01.png) no-repeat left center;}/* implement label by setting the checkbox Click Event */. Checkbox01: checked + label {background: url (images/rb02.png) no-repeat left center;}/* Check E * // * single-choice S */. radio {width: 100px; height: 80px; float: left ;}. radio01 {display: none; width: 30px; height: 30px ;}. radio label {display: block; width: 80px; height: 40px; background: url (images/cbox_01.png) no-repeat left center ;} /* set the radio click event to change the background image of the label */. radio01: checked + label {background: url (images/cbox_02. Png) no-repeat left center ;} /* single choice E */</style> check box <input class = "checkbox01" id = "01" name = "c01" type = "checkbox"/> <! -- For attribute indicates clicking in label, the radio control --> <input class = "checkbox01" id = "02" name = "c02" type = "checkbox"/> <input class = "checkbox01" id = "03" name = "c03" type = "checkbox"/> single comment <input class = "radio01" id = "04" name = "c01" type = "radio"/> <! -- For attribute indicates clicking in label, the radio control --> <input class = "radio01" id = "05" name = "c01" type = "radio"/> <input class = "radio01" id = "06" name = "c01" type = "radio"/> <p> & nbsp; </p> <p> the key is. checkbox01: checked + label. The principle is to first set the <label> label background to hide the <input/> label. When the <input/> label is clicked, change the background of the <label> label. It is very convenient to obtain <input/> data the day after tomorrow. Note that the for Attribute of <label> must correspond to the id of the <input/> label. </Label> </p> <p> 2. JQuery implementation </p> <p> first look: </p>  </P> <p> this type of plug-in is mainly implemented by a powerful plug-in based on the JQuery framework. Therefore, when introducing the plug-in js file, you must first introduce the JQuery file, two file links, JQuery: http://pan.baidu.com/s/1jGValUm Plugin: http://pan.baidu.com/s/1qWV3JjA How to use it is clearly written in comments. The advantage of this method is that it is compatible with various mainstream browsers, including IE7 and 8. The inconvenience is that data needs to be obtained based on the node when obtaining data. below is my html code: </p> <p> & nbsp; </p> <pre class = "brush: java; "> </pre> <title> </title> <meta charset =" UTF-8 "/> <link href =" css/style.css "rel =" stylesheet "type =" text /css "/> <! -- Single ipvs --> <div class = "checked" name = "rbt" type = "radiobox" val = "man"> Apple </div> <div name = "rbt" type = "radiobox" val = "wom"> bananas </div> <div name = "rbt" type = "radiobox" val = "wom"> pears </div> <div name = "rbt" type = "radiobox" val = "wom"> watermelon </div> <div name = "rbt" type = "radiobox" val = "wom"> pineapple </div> <div name = "rbt" type = "radiobox" val = "wom"> mango </div> <! -- Singlee --> <! -- Multiple selection box S --> select all C <! -- Select multiple boxes E --> <! -- Drop-down box S --> <div name = "city" type = "selectbox"> & nbsp; </div> <a href = "javascript :; "val =" 050101 "> Suzhou </a> <a class =" selected "href =" javascript :; "val =" 050101 "> Wuxi </a> <a class =" selected "href =" javascript :; "val =" 050101 "> Changzhou </a> <a class =" selected "href =" javascript:; "val =" 050101 "> Hangzhou </a> <! -- Drop-down box E --> <script src =" http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js "> </Script> <script type =" text/javascript "src =" js/jquery. inputbox. js "> </script> <script type =" text/javascript "> // checkbox $ (function () {$ (& #39; [name = "rbt"] & amp; #39 ;). inputbox (); $ (& amp; #39 ;. cbt & #39 ;). inputbox (); // applicable to multiple option boxes $ (& #39; div [name = "city"] & #39 ;). inputbox () ;}); </script>

Start: as long as you are still trying, it is not a failure.