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 calc(100% - 8px) 50%;
}
select.select::-ms-expand { display: none; }/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select.select:focus option{ padding-left: 6px; }

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

 

posted @ 2019-05-16 17:49  zhanglw  阅读(283)  评论(0)    收藏  举报