How can I create a small color box using html and css?
I have a picture on a html file/site and I want to add the list of available colors for that picture. I want to create very small boxes or dots, a small box for every color.
How can I do this?
Thanks!
Solution 1:
With old browsers, you would often use float, but then you would need a clearfix so this approach is not used often these days.
.box {
float: left;
width: 20px;
height: 20px;
border: 1px solid rgba(0, 0, 0, .2);
}
.blue {
background: #13b4ff;
}
.purple {
background: #ab3fdd;
}
.wine {
background: #ae163e;
}<div class="box blue"></div>
<div class="box purple"></div>
<div class="box wine"></div>In modern browsers, the easiest way is with flexbox:
.wrapper {
display: flex;
}
.box {
width: 20px;
height: 20px;
border: 1px solid rgba(0, 0, 0, .2);
}
.blue {
background: #13b4ff;
}
.purple {
background: #ab3fdd;
}
.wine {
background: #ae163e;
}<div class="wrapper">
<div class="box blue"></div>
<div class="box purple"></div>
<div class="box wine"></div>
</div>Or alternatively with display: inline-block:
.box {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid rgba(0, 0, 0, .2);
}
.blue {
background: #13b4ff;
}
.purple {
background: #ab3fdd;
}
.wine {
background: #ae163e;
}<div class="box blue"></div>
<div class="box purple"></div>
<div class="box wine"></div>Solution 2:
If you want to create a small dots, just use icon from font awesome.
fa fa-circle