当前位置:首页 > 前端技术 > 前端HTML5 颜色选择器 input[type = "color"]

前端HTML5 颜色选择器 input[type = "color"]

2022年08月06日 08:11:56前端技术2

由于项目上要实现对不同的状态实现自定义配置不同的颜色,所以需要实现一个color选择器,一开始是直接采用input框输入16进制的颜色值,但对于非专业人士不太了解颜色对于的16进制码,后来改用类似于chrome中的取色器,类似于这样的

前端HTML5  颜色选择器   input[type = "color"] _ JavaClub全栈架构师技术笔记

网上找了一些插件,总有些问题,自己水平不够又写不出来,后来找了一下发现HTML5 已经有现成的拾色器,

即input[type = "color"]

效果如图

 

前端HTML5  颜色选择器   input[type = "color"] _ JavaClub全栈架构师技术笔记

很实用的

代码

<input type="color" id="color"> //基本实现代码

至于相关的一些配置及获取颜色对于的16进制码,可以参考一下下面的文档

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/color

https://www.w3school.com.cn/jsref/dom_obj_color.asp

https://www.jianshu.com/p/becb82b22926

作者:鲤鱼和龙虾
来源链接:https://blog.csdn.net/lxj7607/article/details/102584730

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/18144.html

分享给朋友:

“前端HTML5 颜色选择器 input[type = "color"]” 的相关文章

HTML常用标签及其用法总结

HTML常用标签及其用法总结

1、HTML分块--------< div> 说起HTML的标签,不得不提起的就是< div>,在制作一个网页的时候,应该先将他们划分为许多个块,再在这些块中进行操作。 整个电脑能够显示是因为显示屏上一个一个的小颗粒,如下宽度:1...

HTML常用标签的用法

HTML常用标签的用法

一、首先要了解一下什么是HTML,HTML(Hyper Text Markup Language,简称:HTML)也叫作超文本标记语言,是一种使用结构化Web网页及其内容的标记语言,HTML文档也叫做Web页面, 下面就来讲讲一些HTML中常用的标签。...

Markdown中使用html标签

有时候,我们会在笔记中使用一些HTML标签,但是Markdown中直接使用html标签会被解析为格式.该怎么书写,可以直接显示为html的标签呢. <h1>这是一个标题</h1> //其中的<h1&g...

script标签的属性

script标签的属性

共六个,language废弃,charset不常用。 async:异步加载脚本,且不保证加载顺序(下载时不影响页面解析,但解析时会暂停页面渲染) defer:立即下载,延迟执行(遇到</html>标签时执行),有顺序 type:默认type='tex...

HTML之框架结构标签的简单使用

框架标签的简单使用 框架: 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面,简而言之,就是在一个窗口中显示多个页面。 每个页面称之为一个框架。并且每个框架独立于其他的框架。 使用...

HTML框架结构标签(frameset)

HTML框架结构标签(frameset)

第一次了解到竟然还有HTML框架结构标签()。为此小编在实例中应用了一下,但是在搭建框架之初就遇到 了问题。为此总结本博客,以便大家能及时解决问题。 什么是HTML框架结构标签(<frameset>)...

超链接a标签的属性target的可选值有哪些以及区别

超链接a标签的属性target的可选值有哪些以及区别 1、<a target="_blank"></a> 2、<a target="_parent"></a> 3、<a targ...

html标签汇总

html标签汇总

文章目录 段落处理 图像标签 超链接 注释 特殊字符 表格 列表标签 无序列表 有序列表 自定义列表...

HTML中的Style标签media属性控制打印内容样式

最近项目用到Web页面打印报表的功能,因为我们的项目采用的是HTML的Table方式实现的表格,所以符合javascript中的window.print,了解了下window.print()函数的使用方式。 window.print():用来打印window.documen...

HTML 5 video 视频标签全属性详解

现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、7、8)。好吧,现在让我们从技术层面...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。