checkbox开关

css

.iosCheck {        /* Blue edition */    }    .iosCheck input {
           display: none;    }    .iosCheck i {
           display: inline-block;        cursor: pointer;        padding-right: 25px;        transition: all ease 0.2s;        -webkit-transition: all ease 0.2s;        border-radius: 25px;        box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);    }    .iosCheck i:before {
           display: block;        content: '';        width: 25px;        height: 25px;        border-radius: 25px;        background: white;        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);    }    .iosCheck :checked + i {
           padding-right: 0;        padding-left: 25px;        background: #00e970;        box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px #00e079;        -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px #00e079;    }    .iosCheck.blue :checked + i {
           background: #6cbff0;        box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px #0093ea;        -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px #0093ea;    }    /* General styling */

 

html

 

css按钮

css

/* clean gray ***  start *******************************************************************************/.clean-gray {
     background-color: #eeeeee;  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);  background-image: linear-gradient(top, #eeeeee, #cccccc);  border: 1px solid #ccc;  border-bottom: 1px solid #bbb;  border-radius: 3px;  color: #333;  font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;  padding: 1px 0;  text-align: center;  text-shadow: 0 1px 0 #eee;  width: 150px;}.clean-gray:hover {
       background-color: #dddddd;    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);    background-image: linear-gradient(top, #dddddd, #bbbbbb);    border: 1px solid #bbb;    border-bottom: 1px solid #999;    cursor: pointer;    text-shadow: 0 1px 0 #ddd; }.clean-gray:active {
       border: 1px solid #aaa;    border-bottom: 1px solid #888;    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }.detail-btn {
       margin: 0 auto;    padding: 0 10px;    text-decoration: none;}.detail-btn:hover {
       text-decoration: none;}/* clean gray ***  end *******************************************************************************/

html

取消