javascript - 基于输入值的样式

Question

我有一些输入，例如:

<input name="binValue" value="Grey" type="hidden">

那是隐藏的。我想根据隐藏输入的值显示一个彩色方 block ，而不是仅仅显示“灰色”的简单文本。

就像亚马逊如何显示彩色方 block here .

在左侧的细化中。

我使用的 HTML 是:

<input name="binValue" value="Grey" type="hidden">
<a href="hostedbywebstore.com/s?field_color_map=Grey&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Csize_name%2Cbrandtextbin%2Ccolor_map%2Cprice%2Ccollection_name-bin&amp;searchBinNameList=subjectbin%2Csize_name%2Cbrandtextbin%2Ccolor_map%2Cprice%2Ccollection_name-bin&amp;searchKeywords=*&amp;searchNodeID=5444386011&amp;searchRank=salesrank&amp;searchSize=12" rel="nofollow">                       
    <input type="checkbox">Grey    
</a>

谢谢。

Answer 1

添加一个 CSS 类

.Grey{
    display: inline-block;
    background-color: #CCC; /* or some other grey value you like */
    width: 15px;
    height: 15px;
}

改变你的复选框

<input type"checkbox"><div class="Grey">&nbsp;</div>

您也可以将其更改为没有复选框，div 是复选框。