在html中创建一个小颜色框
Posted
技术标签:
【中文标题】在html中创建一个小颜色框【英文标题】：Create a small color box in html 【发布时间】：2012-01-16 01:18:31 【问题描述】：我有一个li 元素。在li 元素内有许多元素，如input、labels。
我现在想在每个li 中添加一个小颜色。颜色将动态提供。我想要一些正方形的东西，并在页面加载时填充我提供的颜色。有什么东西已经存在了吗？
【问题讨论】：
您可能想为您的列表发布一些示例 html，其中包含它所具有的元素 你想显示颜色选择器还是其他东西..？ 我们可以看看您现有的代码吗？ jsfiddle.net 可让您粘贴实时代码示例。 伙计，没有代码示例，事情变得难以理解。你想用颜色填充什么？你的li 布局怎么样？
【参考方案1】：
免责声明：我不熟悉 CSS。
我对 CSS 的细微差别感到恼火，并且没有让外观和感觉完全正确，也没有弄清楚 div 的不同配置。我偶然发现了一些更简单的东西（对我和希望其他人来说）：使用 SVG。
这是一个黄色框的例子：
<html>
Look at me - I'm a yellow box!
<svg >
<rect style="fill:#E9E612;stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
</html>当与 jinja 模板一起使用时，我可以通过提供来自 python 的正确字符串来配置填充颜色：
<svg >
<rect 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 了解实时示例。
【讨论】：
晚会有点晚了，有什么办法给这个加个边框吗？ 哈。这比预期的要简单。对不起，这很新。 :)以上是关于在html中创建一个小颜色框的主要内容，如果未能解决你的问题，请参考以下文章
如何制作颜色框内联图像，在视图中的颜色框触发器中创建，打开下一个图像 onclick
如何在 ggplot 中创建一个图例，将名称和颜色分配给列而不是数据框列中的值？