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

标签 html css button

我希望用户能够打开颜色对话框来设置“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

或者如果你想隐藏输入类型,一开始就隐藏它或者给它 style="display :none "

关于html - 为 HTML 颜色输入设置自定义图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54051139/

相关文章:

javascript - 链接按钮在 JavaScript 中不起作用

button - 如何在不更改颜色的情况下禁用 Vuetify 按钮

html - Angular Material : Styling mat-form-field inside mat-toolbar

jquery - 此场景的最佳实践是什么 - jQuery 和 CSS?

html - 如何配置 CKEditor 以允许将 html block 级标签包装在 anchor 标签中

html - 我想将现有的 CSS 样式应用于页面上的所有标签。如何?

html - 如果容器不透明度为 0,是否加载背景图像

android - Android 上触觉反馈的一般设置

javascript - 使用未选中的复选框,如何过滤掉始终隐藏的 NSFW 标记的 div,但选中打开时,以遵循可见性规则?

html - :After element positioning wrong only in IE :before element is correct