css自定义一些控件样式

/*自定义虚线*/
div.isolationZone{
    width: 85%;
    margin: 32px auto 30px auto;
    height: 1px;
    background-image: linear-gradient(to right, #d0daea 0%, #d0daea 60%, transparent 80%);
    background-size: 10px 1px;
    background-repeat: repeat-x;

}

/*自定义复选框*/
input[type="checkbox"].checkbox {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background: #fff url("../img/icon_unchecked.png") no-repeat;
   width: 16px;
   height: 16px;
   vertical-align: middle;
   outline: none; /*去掉自带的边框*/
}
input[type="checkbox"].checkbox:checked {
    background: url("../img/icon_checked.png") no-repeat;
}
input[type="checkbox"]:focus{
    border: 0;
}


/*重写 select 样式*/
select.select {
    outline: none;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    padding-right: 14px;
    background: url("../img/icon_drop_down.png") no-repeat scroll  transparent;
    background-position: calc(100% - 8px) 50%;
}
select.select::-ms-expand { display: none; }
select.select:focus option{
    padding-left: 6px;
}

/*设置输入框disabled状态的样式*/
input[disabled],input:disabled{
    background-color:#FFFFFF;
}

猜你喜欢

转载自www.cnblogs.com/zhanglw456/p/10877067.html