在html中创建一个小颜色框 [英] Create a small color box in html

问题描述

我有一个 li 元素。在 li 元素中有许多元素，例如 input ，标签。

I have a li element. Inside the li element there are many elements like input, labels.

我现在要在每个 li 中添加一个小颜色。将动态提供颜色。我想有东西正方形和页面加载它填充我提供的颜色。

I want to put now a small color inside each li. The color will be provided dynamically. I want to have something square and on page load it fills with the color i provide. Is there something already existing?

推荐答案

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

Are you looking for something like this?

HTML

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 。

See jsFiddle for live example.

这篇关于在html中创建一个小颜色框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！