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. Adobe RIA 开发工程师认证考试大纲

    AdobeRIA 开发工程师认证考试大纲 考题数量:共90道题,考试通过正确率:60% 考试时间:120分钟  试题种类:单选题.多选题和判断题     1. Adobe RIA基础知识(2道题)  ...

  2. Dshell----开源攻击分析框架

    前言 随着互联网的高速发展,网络安全问题变得至关重要,随着网络的不断规模化和复杂化,网络中拒绝服务(Denial of Service,DoS)攻击和分布式拒绝服务(Distributed Denia ...

  3. JAVA几种缓存技术介绍说明

    OSCache OSCache是个一个广泛采用的高性能的J2EE缓存框架,OSCache能用于任何Java应用程序的普通的缓存解决方案. OSCache有以下特点: 我创建了一个群,群里不定期分享技术 ...

  4. 【BZOJ4805】欧拉函数求和（杜教筛）

    [BZOJ4805]欧拉函数求和(杜教筛) 题面 BZOJ 题解 好久没写过了 正好看见了顺手切一下 令\[S(n)=\sum_{i=1}^n\varphi(i)\] 设存在的某个积性函数\(g(x) ...

  5. 【Luogu1291】百事世界杯之旅（动态规划，数学期望）

    [Luogu1291]百事世界杯之旅(动态规划,数学期望) 题面 洛谷 题解 设\(f[i]\)表示已经集齐了\(i\)个名字的期望 现在有两种方法: 先说我自己的: \[f[i]=f[i-1]+1+ ...

  6. 【BZOJ4012】开店（主席树）

    [BZOJ4012]开店(主席树) 题面 Description 风见幽香有一个好朋友叫八云紫,她们经常一起看星星看月亮从诗词歌赋谈到 人生哲学.最近她们灵机一动,打算在幻想乡开一家小店来做生意赚点钱 ...

  7. (右偏树)Bzoj2333: [SCOI2011]棘手的操作

    题面 戳我 Sol 右偏树滑稽+并查集 再在全局开一个可删除的堆(priority_queue) 注意细节 # include <bits/stdc++.h> # define RG re ...

  8. PHP接收android传过来的图片

    在android手机app上,上传图片,PHP服务端接收图片需要一下步骤 1 需要android 开发人员 把图片转成base64格式 2 PHP端接收转化后的base64字符串,然后进行转译 fun ...

  9. python socket知识点

    ---恢复内容开始--- 数据在网络上进行传播,需要通过一种通信协议.常见的通信协议有:HTTP,SMTP,DNS,FTP,SSH,SNMP,ICMP PING,DNCP. OSI(Open Syst ...

  10. python感悟

    嗯,对于python我其实也是一知半解,比较擅长java,我就拿java和python进行比较一下吧 1,首先先说简单的程序运行时间问题,对于同等时间复杂度的测试程序,python虽然运行速度没有c快 ...