1

I would like to make a dropdown with color squares, like this;

enter image description here

Now these boxes are emojis, but I would like to make them only with HTML and CSS, because I want to change those background colors with color code. However, <option> cannot contain any HTML tag, and ":before" does not work. Is there any way to do it?

My current version with emojis are;

<select>
    <option value="">All</option>
    <option value="A"> Option A</option>
    <option value="B"> Option B</option>
    <option value="C"> Option C</option>
    <option value="D">⬜ Option D</option>
</select>
Kota.M
  • 117
  • 7
  • The styling options are very [limited](https://stackoverflow.com/q/7208786/4934409) with ` – Scriptim Feb 27 '23 at 20:07
  • [How to build a custom select dropdown](https://www.w3schools.com/howto/howto_custom_select.asp) – Brett Donald Feb 28 '23 at 06:43

1 Answers1

0

Several following SO articles cover same points as mentioned above. Bootstrap, ul li...or instead of a color box just switch to a color background and bump the font-size of the font up in the 'option' tag. See following articles links about it (the last article being where most of this code example came from (minus the url data svg), which can also be read at 'Css-tricks' site. SO article

SO article

Article for background.

Here is the CSS:

  body {
  font-family: Arial, sans-serif;
  font-size: 1em;
  margin: 20px;
 }

.select-css {
  display: block;
  font-size: 1em;
  font-family: sans-serif;
  font-weight: 700;
  color: #333;
  line-height: 1.3em;
  padding: .6em 1.4em .5em .8em;
  width: 200px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #aaa;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.3);
  border-radius: .5em;
  background-color: #dc1;
  background-image:  url(''),
  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%, 0 0;
  background-size: .65em auto, 100%;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;   
}

/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
  display: none;
}

/* Hover style */
.select-css:hover {
  border-color: #888;
  background-color: #dcc;
}

/* Focus style */
.select-css:focus {
  border-color: #aaa;
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #111;
  outline: none;
}

/* Set options to normal weight */
.select-css option {
  font-weight: normal;
}

option {
  line-height: 1.5em;
  font-size: 1.3em;
}

/*--Colorize it all--*/
.cyanText {background-color: #00ffff; color: #fff;}
.greenText {background-color: #008000; color: #fff;}
.blueText {background-color: #0000ff; color: #fff;}
.redText {background-color: #ff0000; color: #fff;}
.orangeText {background-color: #ff4500; color: #fff;}
.yellowText {background-color: #ffd700; color: #fff;}

Here is the HTML:

    <label for="all-select">Select options:</label>
    <select class="select-css">
    <option class="all" value="">All</option>
    <option class="greenText" value="apple">Apple</option>
    <option class="redText" value="banana">Banana</option>
    <option class="blueText" value="grape">Grape</option>
    <option class="orangeText" value="cherry">Cherry</option>
    <option class="yellowText" value="lemon">Lemon</option>
    </select>
granite
  • 304
  • 4