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. JSON对象转换成JSON字符串

    1.问题背景 有一个json对象,需要将其转换成json字符串 JSON.stringify(obj) 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DT ...

  2. textarea的不可拉伸和不可编辑

    不可拉伸: textarea { resize: none; } 不可编辑: 第一种方法: <textarea disabled></textarea> 第二种方法: < ...

  3. js中的0就是false，非0就是true及案例

    在处理js代码判断真假时经常会这么写. 但fun()可能得到的是数字0,这可不是表示的没有值,但是!js中的数字0就是false,非0就是true. 于是0就被无情的当做false了. 已经被这个坑过 ...

  4. Tomcat下使用C3P0配置JNDI数据源（在项目的META-INF目录下创建context.xml的文件）

    一.C3P0下载 C3P0下载地址:http://sourceforge.net/projects/c3p0/files/?source=navbar 下载完成之后得到一个压缩包

  5. 安装Apache Maven

    Apache Maven的安装是一个简单的过程:解压提取文件,将解压后的bin目录,配置到系统环境变量PATH中,以便于系统各目录下使用shell,都可以操作mvn command. 详细步骤: 1. ...

  6. View的平移、缩放、旋转以及位置、坐标系

    原创 2015年05月12日 13:15:29 标签: Android / Scroll / Scale / Translation / Rotation 24733 Android开发中,经常会接触 ...

  7. 【NOIP2014】【洛谷1941】【CJOJ1672】飞扬的小鸟

    题面 描述 Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了水管或者掉在地上的话, ...

  8. HiHocoder1415 : 后缀数组三·重复旋律3 & Poj2774：Long Long Message

    题面 HiHocoder1415 Poj2774 Sol 都是求最长公共子串,\(hihocoder\)上讲的很清楚 把两个串拼在一起,中间用一个特殊字符隔开 那么答案就是排序后相邻两个不同串的后缀的 ...

  9. java怎么解析带有特殊字符的字符串

    可以使用StringEscapeUtils这个工具类.

  10. 1.2为什么需要public static void main（String[] args）这个方法

    一句话:这个方法为程序的入口方法,JVM在运行程序的时候,会首先查找main()方法. 细节: public为权限修饰符,表示任何对象和方法都可以访问这个方法. static表示方法为静态的(即方法中 ...