chrome -webkit-appearance

-webkit-appearance,

以前没听过这个东西，最近有个同事需要个input range类型的字段。

然后研究了下他的css样式。

input[type="range"] {
    -webkit-appearance: none;
    background-color: black;
    height: 2px;
}
 
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    position: relative;
    top: -1px;
    z-index: 1;
    width: 11px;
    height: 11px;
 
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb));
}

这里就用到了-webkit-appearance,根据说明，这个东西是用来设置默认在chrome下元素的显示样式。

上边等于是设置了none之后，就可以设置自定义样式了。