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 。

Answer 2

免责声明：我对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>

在html中创建一个小颜色框

2 个答案: