在html中创建一个小颜色框答案

【问题标题】：Create a small color box in html在html中创建一个小颜色框
【发布时间】：2012-01-16 01:18:31
【问题描述】：

我有一个li 元素。在li 元素内有许多元素，如input、labels。

我现在想在每个li 中添加一个小颜色。颜色将动态提供。我想要一些正方形的东西，并在页面加载时填充我提供的颜色。有什么东西已经存在了吗？

【问题讨论】：

您可能想为您的列表发布一些示例 html，其中包含它所具有的元素
你想显示颜色选择器还是其他东西..？
我们可以看看您现有的代码吗？ jsfiddle.net 可让您粘贴实时代码示例。
伙计，没有代码示例，事情变得难以理解。你想用颜色填充什么？你的li 布局怎么样？

标签： javascript jquery html colors

【解决方案1】：

免责声明：我不熟悉 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>

这是老派，但它很简单并且可以完成工作。

【讨论】：

【解决方案2】：

你在寻找这样的东西吗？

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 了解实时示例。

【讨论】：

晚会有点晚了，有什么办法给这个加个边框吗？
哈。这比预期的要简单。对不起，这很新。 :)