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

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

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

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

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

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

效果如下，外层已看不见

html5 input type="color"边框伪类效果的更多相关文章

  1. [HTML5] 颜色选择器的操作[input type='color'....]

    一.点击事件和获取颜色值 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. 原生HTML5 input type=file按钮UI自定义

    原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...

  3. 给<input type="color">设置默认值

    参考:https://stackoverflow.com/questions/14943074/html5-input-colors-default-color?utm_medium=organic& ...

  4. input type color

    <input type="color"> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input ...

  5. input type=color 设置颜色

    在设置背景色的时候,使用html5 type=color 标签,但是初始值一直都是黑色的,背景如果没有设置的时候,应该是白色,比如文本图元,所以需要设置一个初始的颜色值, 注意: value不实用,怎 ...

  6. 移动端1px边框伪类宽高计算

    移动端1px边框在手机上看显得比较粗,于是我们用伪类结合css3缩放的方法去设置线条,但是如果设置div的一条边,水平线就设置宽度100%,垂直线就设置高度100%,那么如果是div的四条边呢?宽高1 ...

  7. HTML5新标签和CSS伪类

    HTML5提供了很多新的标签,由于HTML5的兼容性比较差,HTML5的标签常用于手机端 <nav> <footer> <section> <header&g ...

  8. html5 input type=search

    <style> input[type="search"]{ border-radius:2px;} input::-webkit-search-cancel-butto ...

  9. 前端实现input[type='file']上传图片预览效果

    众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...

随机推荐

  1. ORA-00922：选项缺失或无效

    1.错误描述    ORA-00922:选项缺失或无效 2.错误原因 3.解决办法

  2. Python中ValueError: invalid literal for int() with base 10 的实用解决办法

    爬虫代理IP由芝麻HTTP服务供应商提供今天在写爬虫程序的时候由于要翻页,做除法分页的时候出现了 totalCount = ' totalPage = int(totalCount)/20 Value ...

  3. RHEL部署ipa红帽身份验证

    1.先下载必须包 yum install -y ipa-server bind bind-dyndb-ldap 2.初始化ipa基本配置 ipa-server-install * Configure ...

  4. [清华集训]小 Y 和恐怖的奴隶主

    题面在这里 题意 有一个\(Boss\)和他血量为\(m\)的随从奴隶主,每当奴隶主受到攻击且不死,并且\(Boss\)的随从个数\(<k\)时,就会新召唤一个血量为\(m\)的奴隶主.每次攻击 ...

  5. [CQOI2009]dance跳舞

    每个人拆成两个点,一个表示接受喜欢的,一个表示不接受喜欢的,(男yes,男no,女yes,女no) 男yes->男no,容量为k:女no->女yes,容量为k 男女喜欢,则男yes-> ...

  6. sspanelv3魔改版邮件设置指南及常用配置

    要进行SSpanel v3魔改版邮件设置,需要在设置文件(位于config/.config.php下)中修改两处内容: 1.设置发送邮件的方式 $System_Config['enable_email ...

  7. anguar-select2

    <!DOCTYPE html> <html ng-app="App"> <head> <meta charset="UTF-8& ...

  8. TC命令流量控制测试(针对具体IP和具体进程)

    TC命令流量控制测试 这里测试系统为Linux操作系统,通过简单的TC命令来实现对带宽的控制. 1对具体IP地址的流量控制 这里采用iperf来进行带宽的测试,首先在服务器和客户端都安装上iperf软 ...

  9. emacs在windows下打开报错原因

    最开始实在是想不通,最开始我明明就能正常使用,后来发现不能用了,过了几天才回过神来,我路径中有中文,换了一个没有中文的路径后打开正常了.太低级的错误了嘛,却那么难发现. 这些数字就是识别不出来我的中文 ...

  10. linux学习之路－－（六）用户及权限详解

    计算机资源 用户 用户的容器,用户组 权限 进程时用户访问计算机的代理,操作文件的时候,文件本身有权限,进程本身也有权限 安全上下文(secure context) 权限: r, w, x 文件: r ...