码迷,mamicode.com
首页 > Web开发 > 详细

html5 input type="color"边框伪类效果

时间:2018-03-27 14:45:00      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:swa   图片   http   col   watch   log   type   osi   val   

html5为input提供了新的类型:color

<input type="color" value="#999" id="color">

点击会弹出颜色修改弹窗,但是不能修改颜色透明度

技术分享图片

点击切换颜色后,效果如下

技术分享图片

样式很丑,它其实是两层div组成的,chrome提供了两个伪类来控制它们

1 #color{border: 0;}
2 ::-webkit-color-swatch-wrapper{background-color:#ffffff;}
3 ::-webkit-color-swatch{position: relative;}
4 /*说明*/
5 ::-webkit-color-swatch-wrapper 这个是外面的容器
6 ::-webkit-color-swatch 这个是内部的颜色按钮,改变颜色后会改变

 

效果如下,外层已看不见

技术分享图片

问题又来了,改变颜色后,会有一个框

技术分享图片

设置outline: none;就行了

html5 input type="color"边框伪类效果

标签:swa   图片   http   col   watch   log   type   osi   val   

原文地址:https://www.cnblogs.com/wangyongx/p/8656816.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!