Sau*_*mar 17 html javascript jquery colors
我有一个li元素.内部li因素也有像许多元素input,labels.
我想在每个内部放一个小颜色li.颜色将动态提供.我希望有一些正方形和页面加载它填充我提供的颜色.有什么东西已经存在吗？
Ste*_*fan 33
你在找这样的东西吗？
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;
}
免责声明：我不熟悉 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>
这是老派，但它很简单，可以完成工作。