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. Linux查看系统中的每个进程

    Linux查看系统中的每个进程 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ps -A PID TTY TIME CMD 1 ? 00:00:01 init ...

  2. 觉得OpenStack的网络复杂？其实你家里就有同样一个网络

    当你想了解OpenStack的Neutron网络,打开下面这张图的时候,心里一定是崩溃的,看起来这些模块连在一起很复杂,但其实和你家里的网络很像,看不出来?看我来慢慢解析. 其实这个网络的样子更像是我 ...

  3. 说出JQuery中常见的几种函数以及他们的含义是什么？

    jQuery中常见的函数如下:  (1)get()取得所有匹配的DOM元素集合. (2)get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素. (3)append(conte ...

  4. json数组本地获取，以及根据字段排序【部分摘录】

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. (luogu P4012)深海机器人问题 [TPLY]

    网页链接 https://www.luogu.org/problemnew/show/4012 做题背景 在不久的将来,人工智能发展使得人类大量失业,也使得现在的我们做[深海机器人问题]做得想死... ...

  6. [NOIP2017] 逛公园

    [NOIP2017] 逛公园 题目大意: 给定一张图,询问长度 不超过1到n的最短路长度加k 的1到n的路径 有多少条. 数据范围: 点数\(n \le 10^5\) ,边数\(m \le 2*10^ ...

  7. SPOJ：To the moon

    题面 vjudge Sol 主席树模板 # include <bits/stdc++.h> # define RG register # define IL inline # define ...

  8. ssr 服务端安装教程

    1 ShadowsocksR 多用户版服务端安装教程(SS-Panel后端) 2 ShadowsocksR 单用户版服务端安装教程

  9. 论文笔记（9）：Multiscale Combinatorial Grouping

    本文大致脉络: 对每张图片,作者首先使用 P. Doll´ar and C. Zitnick. Structured forests for fast edge detection. ICCV , 2 ...

  10. Delphi子窗体随主窗体大小而变化

    当然办法有很多种,我建议用TRzsplitter更好点, TRzsplitter分割,在其上边放置panel,然后把align置为alClient,则可以随着主窗体的大小而一起变动 选中此控件右键ed ...