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. DOS批处理命令递归删除给定的文件（夹），兼VC工程清理小工具

    使用dos批处理命令递归删除指定的文件(夹): (下面内容针对清理VC工程!自己按说明任意修改) 2014-06-10修改:删除前增加了[y,n]询问: echo off rem 递归删除当前文件下指 ...

  2. canvas动画:自由落体运动

    经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转 ...

  3. SpringMVC_第一个程序

    一.基本代码的完成 补充 1.在myeclipse中 WEB-INF下放的资源和WebRoot下的资源区别: WEB-INF下放到资源是不能通过浏览器直接访问的,是比较安全的,只能是后台服务端程序进行 ...

  4. webpack学习（一）：webpack 介绍&安装&常用命令

    一.简单介绍 什么是Webpack Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 主要是用来打包在浏览器端使用的ja ...

  5. RobotFramework自动化测试框架-常用断言关键字

    断言关键字 描述 Should Be Empty 判断是否为空,如果不为空,执行失败,示例: ${value} Set Variable Hello Should Be Empty ${value} ...

  6. 配置Tomcat线程参数maxThreads、acceptCount

    一.配置Tomcat/conf/server.xml修改配置 <Connector port="8080" protocol="org.apache.coyote. ...

  7. 【BZOJ3140】消毒（二分图匹配）

    [BZOJ3140]消毒(二分图匹配) 题面 Description 最近在生物实验室工作的小T遇到了大麻烦. 由于实验室最近升级的缘故,他的分格实验皿是一个长方体,其尺寸为abc,a.b.c 均为正 ...

  8. 【BZOJ3282】Tree （Link-Cut Tree）

    [BZOJ3282]Tree (Link-Cut Tree) 题面 BZOJ权限题呀,良心luogu上有 题解 Link-Cut Tree班子提 最近因为NOIP考炸了 学科也炸了 时间显然没有 以后 ...

  9. 【BZOJ1975】【SDOI2010】魔法猪学院（搜索，A*，贪心）

    我已经沉迷于粘贴题目地址了... 题解 很显然的贪心呀, 就是一定是最短的若干条路径的长度 所以,不断拓展k短路就可以了 至于怎么用A* 评估函数f(x)=dis[x]+g[x] 其中,dis是到N号 ...

  10. 超文本传输​​协议 - HTTP / 1.1（Hypertext Transfer Protocol -- HTTP/1.1）之方法定义（Method Definitions）

    9方法定义 下面定义了HTTP / 1.1的一组常用方法.尽管可以扩展这个集合,但是另外的方法不能假定为单独扩展的客户端和服务器共享相同的语义. 主机请求头域(14.23节)必须伴随所有的HTTP / ...