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

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

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

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

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

 #color{border:; outline:none}

 ::-webkit-color-swatch-wrapper{background-color:#ffffff;}

 ::-webkit-color-swatch{position: relative;}

 /*说明*/

 ::-webkit-color-swatch-wrapper 这个是外面的容器

 ::-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. JavaScript替换HTML标签

    JavaScript替换HTML标签 1.说明 获取HTML字符串(包含标签),通过正则表达式替换HTML标签,输出替换后的字符串 2.实现JavaScript代码 function deleteTa ...

  2. 查找IFileSourceFilter上的Pin

    创建了IFileSourceFilter,可IFileSourceFilter好像不是从IBaseFilter继承来的,没有EnumPins,那应该怎么查找IFileSourceFilter上的pin ...

  3. 书籍--嵌入式Linux驱动开发

    <UNIX环境高级编程>(第2版),史蒂文斯著 <深入理解 Linux 内核>(第三版) ,博韦等著 Linux设备驱动开发详解:基于最新的Linux 4.0内核    宋宝华

  4. java SpringWeb 接收安卓android传来的图片集合及其他信息入库存储

    公司是做APP的,进公司一年了还是第一次做安卓的接口 安卓是使用OkGo.post("").addFileParams("key",File); 通过这种方式传 ...

  5. 标注-隐马尔可夫模型HMM的探究

    1 HMM基本概念1.1 定义1.2 观测序列生成过程1.3 HMM的三个问题2 概率计算算法2.1 直接计算算法2.2 前向算法forward algorithm2.3 后向算法2.4 一些概率与期 ...

  6. Python基础__字符串拼接、格式化输出与复制

    上一节介绍了序列的一些基本操作类型,这一节针对字符串的拼接.格式化输出以及复制的等做做详细介绍.一. 字符串的拼接 a = 'I', b = 'love', c = 'Python'. 我们的目的是: ...

  7. 打造MacOS版“XShell”

    1.背景 XShell作为一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议.作为server端开发,几乎是必备工具了. 很多刚 ...

  8. Firefox扩展安装

    firefox扩展和chrome扩展非常相似,甚至兼容.因总结过chrome扩展的开发,这里不提,本篇谈谈firefox扩展的安装. 1.打包 所谓的打包,就是压缩,利用普通的右键压缩文件夹,这样形成 ...

  9. WebService下实现大数据量的传输

    设置RemotingFormat = SerializationFormat.Binary;再序列化,通过WebService传输,客户端接收,再反序列化,确实效果大大的优于直接传送DataSet,不 ...

  10. log4net应用实践（一）

          1.背景 log4net库是Apache log4j框架在Microsoft .NET平台的实现,是一个帮助程序员将日志信息输出到各种目标(控制台.文件.数据库等)的工具.它是.Net下一 ...