web-dev-qa-db-ja.com

HTMLで小さなカラーボックスを作成する

li要素があります。 li要素内には、input、labelsなどの多くの要素があります。

各liの中に小さな色を入れたいです。色は動的に提供されます。四角いものを作りたいし、ページの読み込み時に提供する色で塗りつぶします。既存のものはありますか？

javascriptjqueryhtmlcolors
17
Saurabh Kumar

このようなものをお探しですか？

[〜＃〜] 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を参照してください。

32
Stefan

免責事項：私はCSSに精通していません。

CSSの微妙なニュアンスに悩まされ、見た目や感触がまったく正しくなく、divのさまざまな構成を理解できませんでした。私はもっ​​と簡単なもの（私と、できれば他の人にとって）につまずいた：SVGを使用する。

レッドボックスの例を次に示します。

<svg width="20" height="20">
<rect width="20" height="20" style="fill:#E9E612;stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

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>
0
Dave C