Menu
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?
446
To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.
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.
113
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.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
