在html中创建一个小颜色框|jquery问答

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

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

您是否正在寻找这样的东西？

的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。

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

这是一所古老的学校，但是很简单，可以完成工作。

本文地址：http://jquery.askforanswer.com/zaihtmlzhongchuangjianyigexiaoyansekuang.html
文章标签：colors , html , javascript , jquery
版权声明：本文为原创文章，版权归 admin 所有，欢迎分享本文，转载请保留出处！

文件下载