我有一个li元素，在li元素里面有很多像input，labels这样的元素。我想现在把一个小颜色里面每个li。颜色将动态提供。我想有一些方形和页面加载它填充我提供的颜色。有什么已经存在？
li
input
labels
rqenqsqc1#
你在找这样的东西吗？
超文本标记语言
<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>
中央支助组
.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**。
pb3skfrl2#
免责声明：我不熟悉CSS。我开始对CSS的细微差别感到恼火，没有得到正确的外观和感觉，也没有弄清楚div的不同配置。我偶然发现了一些简单得多的东西（对我来说，希望对其他人来说）：使用SVG。下面是一个黄框示例：
<html> Look at me - I'm a yellow box! <svg width="20" height="20"> <rect width="20" height="20" style="fill:#E9E612;stroke-width:3;stroke:rgb(0,0,0)" /> </svg> </html>
当使用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>
这是老式的，但它很简单，并得到工作完成。
py49o6xq3#
根据具体情况，Unicode的black square可能会很有用。
This is a colored box: <span style="color: #E9E612">■</span>
3条答案
按热度按时间rqenqsqc1#
你在找这样的东西吗？
超文本标记语言
中央支助组
有关实时示例，请参见**jsFiddle**。
pb3skfrl2#
免责声明：我不熟悉CSS。
我开始对CSS的细微差别感到恼火，没有得到正确的外观和感觉，也没有弄清楚div的不同配置。我偶然发现了一些简单得多的东西（对我来说，希望对其他人来说）：使用SVG。
下面是一个黄框示例：
当使用jinja模板时，我可以通过提供python中的正确字符串来配置填充颜色：
这是老式的，但它很简单，并得到工作完成。
py49o6xq3#
根据具体情况，Unicode的black square可能会很有用。