前端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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章