javascript - 在html中创建一个小颜色框

Question

我有一个 li 元素。 li 元素内有许多元素，如 input、labels。

我现在想在每个 li 中添加一个小颜色。颜色将动态提供。我想要一些方形的东西，在页面加载时它会填充我提供的颜色。有没有已经存在的东西？

Answer 1

你在找这样的东西吗？

HTML

<div class="input-color">
    <input type="text" value="Orange" />
    <div class="color-box" style="background-color: #FF850A;"></div>
    <!-- Replace "#FF850A" to change the color -->
</div>

CSS

.input-color {
    position: relative;
}
.input-color input {
    padding-left: 20px;
}
.input-color .color-box {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #ccc;
    position: absolute;
    left: 5px;
    top: 5px;
}

参见 jsFiddle 实例。