Создайте небольшое поле цвета в html

У меня есть элемент li. Внутри элемента li есть много элементов, таких как input, labels.

Я хочу добавить небольшой цвет внутри каждого li. Цвет будет предоставляться динамически. Я хочу иметь что-то квадратное, и на загрузке страницы он заполняется цветом, который я предоставляю. Есть ли что-то уже существующее?

Ответ 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 для живого примера.

Ответ 2

Ничего себе! спасибо за всю помощь, которую я действительно ценю, очень сложно найти то, что вы ищете в эти дни в Интернете! Спасибо.

<TABLE WIDTH = "200" HEIGHT = "100" ALIGN = "center" BGCOLOR = "blue" CELLPADDING = "2" BORDER= "3" BORDER-STYLE = "ridge">
  <TBODY>
    <TR>
      <TD>
        <CENTER>
          <Font Color = "White" SIZE = "5">Hope this works out for you..!!</Font>
        </CENTER>
      </TD>
    </TR>
  </TBODY>
</TABLE>

Это тот, который я узнал, как это сделать, но я не знаю, действительно ли это полезно для всех!

Ответ 3

Отказ от ответственности: я не знаком с CSS.

Я стал раздражаться из-за нюансов CSS, из-за того, что я не совсем правильно выглядел и чувствовал себя, разбираясь в различных конфигурациях div'ов. Я наткнулся на кое-что гораздо более простое (для меня и, надеюсь, для других): используйте SVG.

Вот пример красной коробки:

<svg width="20" height="20">
<rect width="20" height="20" style="fill:#E9E612;stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

При использовании с шаблоном jinja я могу настроить цветной шаблон, указав правильную строку из python:

<svg width="20" height="20">
<rect width="20" height="20" style="fill:{{supplied_color_str}};stroke-width:3;stroke:rgb(0,0,0)" />
</svg>