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

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

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

即input[type = "color"]

效果如图

很实用的

代码

<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

前端HTML5 颜色选择器 input[type = color]相关推荐

给input type=color设置默认值
参考:https://stackoverflow.com/questions/14943074/html5-input-colors-default-color?utm_medium=organic& ...
input type=color 设置颜色
在设置背景色的时候,使用html5 type=color 标签,但是初始值一直都是黑色的,背景如果没有设置的时候,应该是白色,比如文本图元,所以需要设置一个初始的颜色值, 注意: value不实用,怎 ...
html表单颜色选择器,如何在Django管理中使用HTML5颜色选择器
我试图在Django的管理页面中实现HTML5 colorpicker. 这是我的模型:#model.py ... class Category(models.Model): ... color = ...
好用的前端组件-颜色选择器
一.官网一款支持vue3 的颜色选择器 | ColorPickerV3 二.效果三.感受可以用于移动端,但是得调整弹框的位置,否则可能部分区域在界面外(截至2022-12-12是这样). 支持V ...
前端页面颜色选择器推荐
Spectrum - The No Hassle jQuery Colorpicker
HTML5 新的Input类型
Inpute类型:color color类型用在input字段主要用于选取颜色,如下所示: <!DOCTYPE HTML> <html><head><meta ...
前端HTML5/HTML+CSS3/CSS学习笔记(六)
表单的应用认识表单创建表单认识表单注:表单"是网页上用于输入信息的区域,用来实现网页与用户的交互.沟通.例如注册页面中的用户名和密码输入.性别选择.提交按钮等都是用表单相关的标记定义 ...
HTML5的input color系统颜色选择器
前两天,我写了一篇<推荐两款jQuery色盘选择器>介绍,那是使用JavaScript实现的色盘,今天我给大家介绍HTML5的色盘选择器.HTML5有一个input类型为color,即颜色 ...
HTML5 中的 input 元素的输入类型（type 属性的取值）
目录输入类型:text 输入类型:image 输入类型:reset 输入类型:password 输入类型:submit 输入类型:radio 输入类型:checkbox 输入类型:button 输入 ...

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

前端HTML5 颜色选择器 input[type = color]相关推荐

最新文章

热门文章