color boxes inside select option html

Question

color boxes inside select option in html i want do it using html and css and without using jquery or javascript Output should be like this

i have tried

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

<h2>Dropdown Menu</h2>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#"><span style="background-color:Red">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    Red</a>
    <a href="#"> <span style="background-color:Green">&nbsp;&nbsp;&nbsp;&nbsp;</span> Green
    </a>
  </div>
</div>


<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <span class="color" style="background-color:Red">&nbsp;&nbsp;&nbsp;&nbsp;</span> Red
    <span class="color" style="background-color:Green">&nbsp;&nbsp;&nbsp;&nbsp;</span> Green
  </div>
</div>

but output should display color boxes inside dropdown. color boxes inside select option html

here i am using anchor tag and div tag in the code i have written. but i want it in select, option tag

i converted the code you posted to a snippet and it basically looks like the image you posted. can you please clarify what you want it to do that it's not already doing? — But those new buttons though.., Dec 08 '18 at 07:20
http://jsfiddle.net/NjaEL/59/ this is the example i have refered...but there they used jqery i want it with html and css without adding js and jqury — Uma Devi Palla, Dec 08 '18 at 07:34

score 1 · Answer 1 · answered Dec 08 '18 at 07:31

You can't do it without JavaScript - here's some very simple click handlers that do what you want:

function updateColor(element) {
    var newColor = element.firstChild.style.backgroundColor;
    element.parentElement.parentElement.style.backgroundColor = newColor;
    console.log(newColor);
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

<h2>Dropdown Menu</h2>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#" onclick="updateColor(this)"><span style="background-color:Red" onclick="updateColor(this)">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    Red</a>
    <a href="#" onclick="updateColor(this)"><span style="background-color:Green">&nbsp;&nbsp;&nbsp;&nbsp;</span> Green
    </a>
  </div>
</div>


<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <div onclick="updateColor(this)"><span class="color" style="background-color:Red">&nbsp;&nbsp;&nbsp;&nbsp;</span> Red</div>
    <div onclick="updateColor(this)"><span class="color" style="background-color:Green" onclick="updateColor(this)">&nbsp;&nbsp;&nbsp;&nbsp;</span> Green</div>
  </div>
</div>

https://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list i referred this also...here they did it with images...but i want it color box — Uma Devi Palla, Dec 08 '18 at 07:38

score 0 · Answer 2 · answered Dec 08 '18 at 07:23

0

Remove "min-width: 160px;" from .dropdown-content

And

Remove "padding: 12px 16px;" from .dropdown-content a

answered Dec 08 '18 at 07:23

Ritusmoi Kaushik

211
1
2
6

i am unable to select particular color(option)...can you see output image.. – Uma Devi Palla Dec 08 '18 at 07:30

color boxes inside select option html

2 Answers2