Создайте маленькую цветную рамку в 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 для живого примера.