CODEWITHSUNDEEP
javascriptjqueryhtmlcolors
Saurabh Kumar
Saurabh Kumar

Reputation: 16661

Create a small color box in html

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

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?

Upvotes: 30

Views: 108601

Answers (3)

Nicolai Weitkemper
Nicolai Weitkemper

Reputation: 634

Depending on context, Unicode's black square could prove useful.

This is a colored box:
<span style="color: #E9E612">■</span>

Upvotes: 3

Dave C
Dave C

Reputation: 1434

Disclaimer: I'm not familiar with CSS.

I became annoyed with nuances of CSS and not getting the look and feel quite right and figuring out different configurations of div's. I stumbled on to something much simpler (to me and hopefully others): use SVG.

Here's an example of a yellow-box:

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

When used with a jinja template I can configure the fill color by supplying the correct string from 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>

It's old school, but it's simple and gets the job done.

Upvotes: 18

Stefan
Stefan

Reputation: 5662

Are you looking for something like this?

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;
}

See jsFiddle for live example.

Upvotes: 39

Related Questions