About CSS3 beautify a form's controls

This article mainly for you in detail the CSS3 beautify the form control skills, beautify the drop-down control, radio box, check box, interested in the small partners can refer to

The default controls for the form are different in different browsers, and the user experience is poor. The CSS3 can be used to beautify the form controls to provide a better user experience. The disadvantage is the browser compatibility issues.

I. Drop-down controls

：

The layout structure of the drop-down CONTROL:

<p class= "Container" >          <p class= "select" >              <p> all options </p>              <ul>                  <li Class= "Selected" data-value= "all Options" > All options </li>                  <li data-value= "Python" >Python</li>                  <li data-value= "Javascript" >Javascript</li>                  <li data-value= "Java" >Java</li>                  < Li data-value= "Ruby" >Ruby</li>              </ul>          </p>      </p>

UL used to simulate the drop-down list, in the actual use of the process, according to the back of the background data generated dynamically. The P element is used to render the selected option.

Core style:

. container. select{width:300px;       height:40px;       font-size:14px;       Background-color: #fff;       Margin-left:auto;       Margin-right:auto;   position:relative;       }/* The style of the drop-down arrow */. Container. Select:after{content: "";       Display:block;       width:10px;       height:10px;       Position:absolute;       top:11px;       rightright:12px;       border-left:1px solid #ccc;       border-bottom:1px solid #ccc;       -webkit-transform:rotate ( -45DEG);       Transform:rotate ( -45DEG);       -webkit-transition:transform. 2s ease-in, top 2s ease-in;   Transition:transform. 2s ease-in, top 2s ease-in;       }/* The area displayed by the selected list item */. container. Select p{padding:0 15px;       line-height:40px;   Cursor:pointer;       }/* The style default height of the drop-down list is 0 */. Container. Select ul{list-style:none;       Background-color: #fff;       width:100%;       Overflow-y: auto;       Position:absolute;       top:40px;       left:0; Max-height:0;       -webkit-transition:max-height. 3s ease-in;   Transition:max-height. 3s ease-in;       }. Container. Select UL li{padding:0 15px;       line-height:40px;   Cursor:pointer;   }. Container. Select UL li:hover{background-color: #e0e0e0;       }. Container. Select UL li.selected{background-color: #39f;     Color: #fff;           }/* drop-down CONTROL animation */@-webkit-keyframes slide-down{0%{-webkit-transform:scale (1, 0);       Transform:scale (1, 0);           } 25%{-webkit-transform:scale (1, 1.2);       Transform:scale (1, 1.2);           } 50%{-webkit-transform:scale (1,. 85);       Transform:scale (1,. 85);           } 75%{-webkit-transform:scale (1, 1.05);       Transform:scale (1, 1.05);           } 100%{-webkit-transform:scale (1, 1);       Transform:scale (1, 1);           }} @keyframes slide-down{0%{-webkit-transform:scale (1, 0);Transform:scale (1, 0);           } 25%{-webkit-transform:scale (1, 1.2);       Transform:scale (1, 1.2);           } 50%{-webkit-transform:scale (1,. 85);       Transform:scale (1,. 85);           } 75%{-webkit-transform:scale (1, 1.05);       Transform:scale (1, 1.05);           } 100%{-webkit-transform:scale (1, 1);       Transform:scale (1, 1);      }}. Container. Select.on ul{/* By default, the height of the UL is 0, and when the control is clicked, the height of the drop-down list is set.       */max-height:300px;       -webkit-transform-origin:50% 0;       transform-origin:50% 0;       -webkit-animation:slide-down. 5s ease-in;   Animation:slide-down. 5s ease-in;       }/* drop-down option is selected to control the direction of the arrow */. Container. select.on:after{-webkit-transform:rotate ( -225DEG);       Transform:rotate ( -225DEG);   top:18px; }

This is just a static style, and if you want to implement the "select" process, you need to use JavaScript.

$ (function () {       var selected  = $ ('. Select > P ');       Control List Explicit       selected.on (' click ', Function (event) {           $ (this). "Parent ('. Select '). Toggleclass (' on ');           Event.stoppropagation ();       });       Click on the list item to add the value of the list item to the P label in       $ ('. Select Li '). On (' click ', Function (event) {           var = $ (this);           Selected.text (Self.data (' value '));       });       Click on other areas of the document to hide the list $ (documents       ). On (' click ', Function () {           $ ('. Select '). Removeclass (' on ');       })   ;

Two. Beautify the Radio box

lable tags can be linked with a radio box through the For property. We use this feature to achieve the beautification of the single box, which is also the principle. And don't forget to hide the real Radio box (type= "Radio").

/* Use a label tag to simulate the style of radio */. Radio-block label{Display:inline-block;       position:relative;       width:28px;       height:28px;       border:1px solid #cccccc;       Background-color: #fff;       border-radius:28px;       Cursor:pointer;   margin-right:10px;   } input[type= "Radio"]{Display:none;       }. Radio-block label:after{content: ';       Display:block;       Position:absolute;       width:20px;       height:20px;       left:4px;       top:4px;       Background-color: #28bd12;       border-radius:20px;       /* Control the center point via the Scale property */-webkit-transform:scale (0);   Transform:scale (0);       }/* Check style */input[type= "Radio"]:checked + label{Background-color: #eee;       -webkit-transition:background-color. 3s ease-in;   Transition:background-color. 3s ease-in;       }/* After selected style */input[type= "Radio"]:checked + label:after{-webkit-transform:scale (1);       Transform:scale (1); -webkit-transition:transform. 2s ease-in;   Transition:transform. 2s ease-in; }

Final effect:

Three. Beautify check box

The principle and the radio box are made in a similar way. In checked, the table is rounded with the left value and the label's background.

. switch-block{width:980px;       padding:3% 0;       margin:0 Auto;       Text-align:center;   Background-color: #fc9;       }. Switch-block label{display:inline-block;       width:62px;       height:30px;       Background-color: #fafafa;       border:1px solid #eee;       border-radius:16px;       position:relative;       margin-right:10px;       Cursor:pointer;       -webkit-transition:background. 2s ease-in;   Transition:background. 2s ease-in;   } input[type= "checkbox"]{display:none;       }. Switch-block label:after{content: ';       Position:absolute;       width:28px;       height:28px;       border:1px solid #eee;       border-radius:14px;       left:1px;       Background-color: #fff;       -webkit-transition:left. 2s ease-in;   Transition:left. 2s ease-in;       }. Switch-block input[type= "checkbox"]:checked + label{Background-color: #3c6;       -webkit-transition:background. 2s ease-in; Transition:background. 2s ease-in;       }. Switch-block input[type= "checkbox"]:checked + label:after{left:32px;       -webkit-transition:left. 2s ease-in;   Transition:left. 2s ease-in; }

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!