为 HTML 颜色输入设置自定义图标

迪迪埃·蒂布勒

我希望用户能够打开颜色对话框来设置“ForeColor”和“BackgroundColor”。所以我用这个:

<span class="insertPicLabel">ForeColor</span>
<input type="color" id="fontColorButton" title="Change Font Color">
<span class="insertPicLabel">Highlight</span>
<input type="color" id="highlightButton" title="Highlight text Color">

哪个工作正常,但看起来不太好。我希望改用带有图标的按钮。我试图设置一个背景图像,但颜色条总是显示在它上面。

我能做什么?是否有另一种方法可以像使用 VB 一样像普通按钮一样打开颜色对话框?

宗教

你可以使用这样的东西:

<span class="insertPicLabel">ForeColor</span>
<input type="color" id="fontColorButton" title="Change Font Color">

<button class="xx btn-default"><i class="fas fa-palette"></i>open  box </button>

<script>
$(".xx").on('click', function(){
  $("#fontColorButton").click();
})
</script>

使用的库:Jquery、bootsrtap、fontawesome

请参考此链接以供参考:https : //codepen.io/singhagam1/pen/MZVrrJ

或者如果你想隐藏输入类型,只需在最初隐藏它或给它 s​​tyle="display :none "

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在VS 2013中为HTML尖括号设置自定义颜色?

来自分类Dev

如何在VS 2013中为HTML尖括号设置自定义颜色?

来自分类Dev

将地图标记设置为自定义颜色的Android

来自分类Dev

将自定义颜色的按钮设置为禁用的样式

来自分类Dev

如何将自定义颜色设置为WindowBackground

来自分类Dev

自定义html标签u,将其设置为比文本宽

来自分类Dev

Chrome为自定义HTML元素的offsetWidth返回0

来自分类Dev

如何在html5中为输入类型tel自定义正则表达式?

来自分类Dev

对HTML按钮使用自定义图标

来自分类Dev

对HTML按钮使用自定义图标

来自分类Dev

如何使用Leaflet为Leaflet Realtime插件设置自定义图标?

来自分类Dev

将自定义图像视图设置为操作栏的菜单图标

来自分类Dev

无论如何在关闭和打开时为FloatingActionMenu设置自定义图标?

来自分类Dev

Android将自定义图标设置为标记在棉花糖中返回null

来自分类Dev

如何在 mac osx 中为文件类型设置自定义图标

来自分类Dev

为自定义控件设置样式

来自分类Dev

为自定义UINavigationBar设置委托

来自分类Dev

为自定义控件设置样式

来自分类Dev

如何在点击时将html颜色输入值设置为div颜色

来自分类Dev

为Vim中的自定义语法关键字设置颜色?

来自分类Dev

在Android(setAlpha)中将不透明设置为自定义颜色

来自分类Dev

为工具提示方块Chart.js设置自定义颜色

来自分类Dev

如何在altair中将自定义颜色主题设置为默认值?

来自分类Dev

如何在对话框中将自定义颜色设置为getWindows

来自分类Dev

如何在代码后面将自定义背景设置为ListView项目颜色?

来自分类Dev

如何在 Flutter 中为自定义画家的颜色设置动画?

来自分类Dev

如何在“开始”屏幕中为桌面应用程序自定义图块(更改/更大的图标,更改颜色)?

来自分类Dev

使用自定义逻辑为纸张输入容器设置默认值

来自分类Dev

Rails-为输入字段(前端)设置自定义验证消息

Related 相关文章

  1. 1

    如何在VS 2013中为HTML尖括号设置自定义颜色?

  2. 2

    如何在VS 2013中为HTML尖括号设置自定义颜色?

  3. 3

    将地图标记设置为自定义颜色的Android

  4. 4

    将自定义颜色的按钮设置为禁用的样式

  5. 5

    如何将自定义颜色设置为WindowBackground

  6. 6

    自定义html标签u,将其设置为比文本宽

  7. 7

    Chrome为自定义HTML元素的offsetWidth返回0

  8. 8

    如何在html5中为输入类型tel自定义正则表达式?

  9. 9

    对HTML按钮使用自定义图标

  10. 10

    对HTML按钮使用自定义图标

  11. 11

    如何使用Leaflet为Leaflet Realtime插件设置自定义图标?

  12. 12

    将自定义图像视图设置为操作栏的菜单图标

  13. 13

    无论如何在关闭和打开时为FloatingActionMenu设置自定义图标?

  14. 14

    Android将自定义图标设置为标记在棉花糖中返回null

  15. 15

    如何在 mac osx 中为文件类型设置自定义图标

  16. 16

    为自定义控件设置样式

  17. 17

    为自定义UINavigationBar设置委托

  18. 18

    为自定义控件设置样式

  19. 19

    如何在点击时将html颜色输入值设置为div颜色

  20. 20

    为Vim中的自定义语法关键字设置颜色?

  21. 21

    在Android(setAlpha)中将不透明设置为自定义颜色

  22. 22

    为工具提示方块Chart.js设置自定义颜色

  23. 23

    如何在altair中将自定义颜色主题设置为默认值?

  24. 24

    如何在对话框中将自定义颜色设置为getWindows

  25. 25

    如何在代码后面将自定义背景设置为ListView项目颜色?

  26. 26

    如何在 Flutter 中为自定义画家的颜色设置动画?

  27. 27

    如何在“开始”屏幕中为桌面应用程序自定义图块(更改/更大的图标,更改颜色)?

  28. 28

    使用自定义逻辑为纸张输入容器设置默认值

  29. 29

    Rails-为输入字段(前端)设置自定义验证消息

热门标签

归档