在html中创建一个小颜色框

2021/01/31 01:11 · jquery ·  · 0评论

我有一个li元素。li元素内有许多元素,如inputlabels

我现在想在每个里面放一个小颜色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
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!