Modify the default radio, checkbox, and select styles.

Source: Internet
Author: User

Modify the default radio, checkbox, and select styles.
Style radioselectcheckbox compatibility

Currently, the front-end page is becoming more and more effective, and the default input component style obviously cannot meet the requirements. Taking advantage of this demand in this development page, here we will sort out the methods for modifying radio, checkbox, and select.
First:

Radio and checkbox

There are two common methods to modify the default radio style.

Pure CSS

The key CSS code is as follows:

.demo1 input[type='radio'],.demo1 input[type="checkbox"]{    display:none; }.demo1 label:before{    content: "";    display: inline-block;    width: 17px;    height: 16px;    margin-right: 10px;    position: absolute;    left: 0;    bottom: 0;    background-color: #3797fc;}.demo1 input[type='radio'] + label:before{     border-radius: 8px;}.demo1 input[type='checkbox'] + label:before{     border-radius: 3px;}.demo1 input[type='radio']:checked+label:before{    content: "\2022";    color: #fff;    font-size: 30px;    text-align: center;    line-height: 19px;}.demo1 input[type='checkbox']:checked+label:before{    content: "\2713";    font-size: 15px;    color: #f3f3f3;    text-align: center;    line-height: 17px;}
  • Advantage: With the full help of the advantages of CSS3, you can do it with pure CSS3 without using js and images.

  • Disadvantage: poor compatibility. Only IE9 + is supported.

Js + image
  • Js Code:

$(function(){    $(".demospan").bind("click",function(){        $(this).addClass("on").siblings().removeClass("on");    })    $(".piaochecked").bind("click",function(){        $(this).hasClass("on_check")?$(this).removeClass("on_check"):$(this).addClass("on_check");        // $(this).toggleClass("on_check");    })})
  • Css code

.demospan{    display: inline-block;    width: 24px;    height: 18px;    /*float: left;*/    padding-top: 3px;    cursor: pointer;    text-align: center;    margin-right: 10px;    background-image: url(http://sandbox.runjs.cn/uploads/rs/161/i5pmsg7s/inputradio.gif);    background-repeat: no-repeat;    background-position: -24px 0;}.demo21{    opacity: 0;    cursor: pointer;    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";    filter:alpha(opacity=0);}.on{    background-position: 0 0;}.piaochecked{    display: inline-block;    width: 20px;    height: 20px;    cursor: pointer;    margin-left: 10px;    text-align: center;    background-image:  url(http://sandbox.runjs.cn/uploads/rs/161/i5pmsg7s/checkbox_01.gif);    background-repeat: no-repeat;    background-position: 0 0;}.on_check{    background-position: 0 -21px;}.cbdemo2{    opacity: 0;    cursor: pointer;    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";    filter:alpha(opacity=0);}
  • Advantage: high compatibility, support for IE6 +

  • Disadvantage: js + images are troublesome.

Select
/* Select */. select {/* rewrite the border in Chrome and Firefox */border: 1px solid green;/* clear the default style */appearance: none;-moz-appearance: none; -webkit-appearance: none;/* show a small arrow in the middle of the Selection box */background: url ("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent; /* Leave a position for the drop-down arrow to avoid text overwriting */padding-right: 14px;}/* clear the default choice box style of ie and hide the drop-down arrow */select: :-ms-expand {display: none ;}

The key to this method is to clear the default style and use the appearance attribute of css3, but the compatibility is poor. Only IE9 + is supported. To be compatible with earlier browsers, you can use Div for simulation.

Todo

  • Compatible with the select style modification of earlier browsers

The demo link is attached: Modify the default radio, checkbox, and select styles.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.