首页 > 代码库 > 单选框、复选框美化

单选框、复选框美化

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><style type="text/css">* {    margin: 0;    padding: 0;}body {    background-color: #E4E1EA;    font: normal 17px/1.5 Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;    color: #5E5F63;}.wrapper {    width: 200px;    margin: 20px auto;}p {    margin: 15px 0 5px 0;}li span {    display: inline-block;    vertical-align: top;}strong {    font-weight: bold;}.radio-btn input[type="radio"], .check-box input[type="checkbox"] {    visibility: hidden;}/*Custom checkbox*/ .check-box {    width: 22px;    height: 22px;    cursor: pointer;    display: inline-block;    margin: 2px 7px 0 0;    position: relative;    overflow: hidden;    box-shadow: 0 0 1px #ccc;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;    background: rgb(255, 255, 255);    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ffffff‘, endColorstr=‘#ededed‘, GradientType=0);    border: 1px solid #ccc;}.check-box i {    background: url(‘css/check_mark.png‘) no-repeat center center;    position: absolute;    left: 3px;    bottom: -15px;    width: 16px;    height: 16px;    opacity: .5;    -webkit-transition: all 400ms ease-in-out;    -moz-transition: all 400ms ease-in-out;    -o-transition: all 400ms ease-in-out;    transition: all 400ms ease-in-out;    -webkit-transform:rotateZ(-180deg);    -moz-transform:rotateZ(-180deg);    -o-transform:rotateZ(-180deg);    transform:rotateZ(-180deg);}.checkedBox {    -moz-box-shadow: inset 0 0 5px 1px #ccc;    -webkit-box-shadow: inset 0 0 5px 1px #ccc;    box-shadow: inset 0 0 5px 1px #ccc;    border-bottom-color: #fff;}.checkedBox i {    bottom: 2px;    -webkit-transform:rotateZ(0deg);    -moz-transform:rotateZ(0deg);    -o-transform:rotateZ(0deg);    transform:rotateZ(0deg);}/*Custom radio button*/ .radio-btn {    width: 20px;    height: 20px;    display: inline-block;    float: left;    margin: 3px 7px 0 0;    cursor: pointer;    position: relative;    -webkit-border-radius: 100%;    -moz-border-radius: 100%;    border-radius: 100%;    border: 1px solid #ccc;    box-shadow: 0 0 1px #ccc;    background: rgb(255, 255, 255);    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ffffff‘, endColorstr=‘#ededed‘, GradientType=0);}.checkedRadio {    -moz-box-shadow: inset 0 0 5px 1px #ccc;    -webkit-box-shadow: inset 0 0 5px 1px #ccc;    box-shadow: inset 0 0 5px 1px #ccc;}.radio-btn i {    border: 1px solid #E1E2E4;    width: 10px;    height: 10px;    position: absolute;    left: 4px;    top: 4px;    -webkit-border-radius: 100%;    -moz-border-radius: 100%;    border-radius: 100%;}.checkedRadio i {    background-color: #898A8C;}</style></head><body><div class="wrapper">    <ul>        <li>            <p>Gender:</p>        </li>        <li>            <input type="radio" name="radio-btn" />Male</li>        <li>            <input type="radio" name="radio-btn" />Female</li>    </ul>    <ul>        <li>            <p>Favorite music:</p>        </li>        <li>            <input type="checkbox" name="check-box" /> <span>Pop music</span>        </li>        <li>            <input type="checkbox" name="check-box" /> <span>Rock music</span>        </li>        <li>            <input type="checkbox" name="check-box" /> <span>Rap music</span>        </li>        <li>            <input type="checkbox" name="check-box" /> <span>Hiphop music</span>        </li>    </ul></div><script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script><script type="text/javascript">    $(function(){        $(input[name="radio-btn"]).wrap(<div class="radio-btn"><i></i></div>);        $(".radio-btn").on(click, function () {            var _this = $(this),                block = _this.parent().parent();            block.find(input:radio).attr(checked, false);            block.find(".radio-btn").removeClass(checkedRadio);            _this.addClass(checkedRadio);            _this.find(input:radio).attr(checked, true);        });        $(input[name="check-box"]).wrap(<div class="check-box"><i></i></div>);        $.fn.toggleCheckbox = function () {            this.attr(checked, !this.attr(checked));        }        $(.check-box).on(click, function () {            $(this).find(:checkbox).toggleCheckbox();            $(this).toggleClass(checkedBox);        });    });</script></body></html>

 

单选框、复选框美化