伪元素改变color类型input框的默认样式实例页面

回到相关文章 »

代码：

CSS代码：
input[type="color"] { width:44px; height:23px; border: 0; padding: 0; background-color: #eee;}
::-webkit-color-swatch-wrapper {
    border: 1px solid #777;
    background-image: -webkit-gradient(linear, 0 0, 100% 0, 
        from(red), 
        color-stop(15%, orange), 
        color-stop(30%, yellow), 
        color-stop(50%, green), 
        color-stop(65%, darkcyan), 
        color-stop(80%, blue), 
        to(purple));
}
::-webkit-color-swatch { height:21px; position:relative; left: 40px; top:-5px; }
HTML代码：
<input type="color" />

效果：