Create a small color box in html
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.
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.