Question

我在我的内部网站上使用<input type='color'>控件。

（注意：我知道该控件是not available in Internet Explorer。这适用于仅供FireFox和Chrome使用的内部网站。）

所选颜色将用于在黑色文字后面创建突出显示background-color，因此我希望使用＆＃34;示例文字＆＃34;在控件内，您可以立即查看是否会出现对比问题。

例如，如果您在选择器中选择绿色，那么您将看到＆＃34;示例文本＆＃34;黑色，选定的绿色为背景。

有没有办法做到这一点？我不知道控件上允许它的任何属性。

起初我以为我可以将文本浮动到它的顶部，但当然只是停止点击按钮！

（显然，以下代码段仅在您使用browser that supports the control时才有效。）

＆＃13;

.colorSelector {
    border:1px solid #000;
    padding:0;
    margin:0;
    width:120px;
    background-color:#fff;
}
#divOuter{
    position:relative;
}
#divExample{
    position:absolute;
    top:1px;
    left:20px;
}

＆＃13;

Without Text:<br/>
<input class="colorSelector" type="color" value="#ff0000"/><br/>
<br/>
With Example Text:<br/>
<div id="divOuter">
    <div id="divExample">Example Text</div>
    <input class="colorSelector" type="color" value="#ff0000"/>    
</div>

＆＃13;

我想最简单的解决方案就是有一个单独的部分，其中包含示例文本，当选择颜色时，它只是设置部分的背景颜色。

将它作为单一控件将会很好。

Answer 1

好吧，这比我想象的要容易，而且我已经有了解决方案......

只需在文本元素中添加click个事件，然后直接调用颜色选择器的click即可...

＆＃13;

$(function(){
  $("#divExample").on("click", function(){
    $("#colorSelector").click();
  });
});

＆＃13;

.colorSelector {
    border:1px solid #000;
    padding:0;
    margin:0;
    width:120px;
    background-color:#fff;
}
#divOuter{
    position:relative;
}
#divExample{
    position:absolute;
    top:1px;
    left:20px;
    cursor:default; /* Set the same cursor as the colour selector*/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Without Text:<br/>
<input class="colorSelector" type="color" value="#ff0000"/><br/>
<br/>
With Example Text:<br/>
<div id="divOuter">
    <div id="divExample">Example Text</div>
    <input class="colorSelector" id="colorSelector" type="color" value="#ff0000"/>    
</div>

＆＃13;

使用带有示例文本

1 个答案: