is it possible to add
or inside an

Question

how can i add <div> or a <span> tag inside an <option> tag?

I want the row to be <option> of course it has a value and everything, but I need to put a circle red color next to the text in that option, is that possible?

code like:

<option value="1">text<div style='background:none repeat scroll 0 0 green;height:25px;width:25px;'></div></option>
<option value="2">text<div style='background:none repeat scroll 0 0 green;height:25px;width:25px;'></div></option>
<option value="3">text<div style='background:none repeat scroll 0 0 green;height:25px;width:25px;'></div></option>
<option value="4">text<div style='background:none repeat scroll 0 0 green;height:25px;width:25px;'></div></option>

score 24 · Accepted Answer · edited Jun 20 '20 at 09:12

24

2019 UPDATE

This solution doesn't work anymore.

Checked in latest Chrome, Firefox and Safari.

It is possible to put a red circle after the text - http://jsfiddle.net/V8cvQ/

option:after {
    content: " ";
    height: 5px;
    width: 5px;
    background: #c00;
    border-radius: 5px;
    display: inline-block;
}

...

UPDATE

To have different color dots

HTML

<select>
    <option> select </option>
    <option class="red"> one </option>
    <option class="green"> two </option>
    <option class="blue"> three </option>
</select>

CSS

option:after {
    content: " ";
    height: 5px;
    width: 5px;
    border-radius: 5px;
    display: inline-block;
}

option.red:after { background: #c00; }
option.green:after { background: #0c0; }
option.blue:after { background: #00c; }

DEMO

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 09 '12 at 19:33

Zoltan Toth

46,981
12
120
134

wow that's great job man – NSF Aug 09 '12 at 19:35
@Zoltan how can i add this in the style of the – Abude Aug 09 '12 at 19:40
updated to have different colors :) – Zoltan Toth Aug 09 '12 at 19:43
i need to add it in the HTML code with `style` if it's possible, how to make the `:after` in the `style=""` ? thanks a lot and sorry for all this troubles :) – Abude Aug 09 '12 at 19:45
1

`:after` is a pseudo-element and I think you can't move its' styles into inline CSS of the ` – Zoltan Toth Aug 09 '12 at 19:55
thanks a lot, i don't know but for some reason the `option:after` is not displayed by firebug and it's not working... i added the exact css code :( but select has a `class="select_box"`, maybe that's it ? – Abude Aug 09 '12 at 20:09
`:after` is a pseudo-element - it's created in CSS, so it won't show up in HTML that Firebug displays – Zoltan Toth Aug 09 '12 at 20:11
what could block `:after`? because i added the CSS code in my CSS and it's not working :( – Abude Aug 09 '12 at 20:13
what browser? http://caniuse.com/#search=after - no support in IE7 – Zoltan Toth Aug 09 '12 at 20:16
7

@ZoltanToth Thanks a lot, but your code is not working on chrome or IE>7.0 , you can test on jsfiddle – Abude Aug 09 '12 at 20:37
take a look - http://stackoverflow.com/q/11903273/1499781 – Zoltan Toth Aug 10 '12 at 14:17
not working on FF – Pablo Pazos Jul 27 '17 at 17:39
7

not working in 2019 – Jason Howard Feb 19 '19 at 06:01
I suggest you edit the answer and tell users that this solution doesn't work anymore. – Asons Apr 05 '19 at 08:26
@LGSon good point. – Zoltan Toth Apr 05 '19 at 11:13

score 23 · Answer 2 · edited Aug 09 '12 at 19:34

23

No. According to MDN, this is what is allowed:

Permitted content: Text with eventually escaped characters (like é)

edited Aug 09 '12 at 19:34

ThiefMaster

310,957
84
592
636

answered Aug 09 '12 at 19:30

Dave

6,141
2
38
65

score 8 · Answer 3 · answered Aug 09 '12 at 19:30

8

Nope, not possible. Or not valid at least.

answered Aug 09 '12 at 19:30

j08691

204,283
31
260
272

score 0 · Answer 4 · answered Aug 09 '12 at 19:33

No. To achieve that you can try this: Use a div to show the selected item and put a div or a button inside it like a drop-down button. When the button is clicked it shows another div containing all your options.

A little bit complex so not necessary to achieve that effect just to make it look pretty

score -1 · Answer 5 · answered Jun 30 '18 at 11:49

You can do it using this custom select input

Reference: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select

var x, i, j, selElmnt, a, b, c;
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  a2 = document.createElement("SPAN");
  a2.setAttribute("class", "square-box");
  a2.setAttribute("style", "background-color: " + selElmnt.options[selElmnt.selectedIndex].getAttribute("COLOR"));
  a.appendChild(a2);
  x[i].appendChild(a);
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 0; j < selElmnt.length; j++) {
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    d = document.createElement("SPAN");
    d.setAttribute("class", "square-box");
    d.setAttribute("style", "background-color: " + selElmnt.options[j].getAttribute("COLOR"));
    c.appendChild(d);
    c.addEventListener("click", function(e) {
      var y, i, k, s, h;
      s = this.parentNode.parentNode.getElementsByTagName("select")[0];
      h = this.parentNode.previousSibling;
      for (i = 0; i < s.length; i++) {
        if (s.options[i].innerText == this.innerText) {
          s.selectedIndex = i;
          h.innerHTML = this.innerHTML;
          y = this.parentNode.getElementsByClassName("same-as-selected");
          for (k = 0; k < y.length; k++) {
            y[k].removeAttribute("class");
          }
          this.setAttribute("class", "same-as-selected");
          break;
        }
      }
      h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
    e.stopPropagation();
    closeAllSelect(this);
    this.nextSibling.classList.toggle("select-hide");
    this.classList.toggle("select-arrow-active");
  });
}

function closeAllSelect(elmnt) {
  var x, y, i, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  for (i = 0; i < y.length; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < x.length; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}
document.addEventListener("click", closeAllSelect);

.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none;
}

.select-selected {
  background-color: DodgerBlue;
}

.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

.select-items div,
.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

.select-hide {
  display: none;
}

.select-items div:hover,
.same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

.select-items .square-box {
  height: 18px;
  width: 18px;
  float: right;
}

.select-selected .square-box {
  height: 18px;
  width: 18px;
  right: 30px;
  position: absolute;
}

<div class="custom-select" style="width:200px;">
  <select>
    <option value="1" color="red">Audi</option>
    <option value="2" color="green" selected>BMW</option>
    <option value="3" color="yellow">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
    <option value="6">Jaguar</option>
    <option value="7">Land Rover</option>
    <option value="8">Mercedes</option>
    <option value="9">Mini</option>
    <option value="10">Nissan</option>
    <option value="11">Toyota</option>
    <option value="12">Volvo</option>
  </select>
</div>

Arslan Tabassum · Answer 6 · 2015-04-13T06:26:14.143

You can replace your Options with JS plugin:

HTML:

<h3>multiSelect = false</h3>
<div id="combo1" class="combo"></div><br>
&nbsp;&nbsp;<button id="get1">get1</button>&nbsp;
<button id="set1">set1</button>

JS:

$(function(){
var dd = [];
for(var i=1;i<=4; i++)
    dd.push({ code: i + '', name: 'Employee ' + i });
var cfg = {
    keyField: 'code',
    displayField: 'name',
    multiSelect: false,
    width: 200,
    boxWidth: 200,
    cols : [{
        field: 'code', width: '30%'
    },{
        field: 'name', width: '70%'
    }],
    data: dd
};
var cfg1 = $.extend({}, cfg);
var cb1 = $('#combo1').mac('combo', cfg1);
$('#get1').click(function(){
    alert(cb1.selected);
});
$('#set1').click(function(){
    cb1.select(2);
});

});

Don't forget to copy external sources from jsfiddle: Here is a fiddle

http://jsfiddle.net/arslantabassum/p5s4jzez/

1. copy html
2. copy javascript
3. copy external sources

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. — Kevin, Apr 08 '15 at 06:45
Ok... i added essential parts, and link will not change, because it's my fiddle ... :) — Arslan Tabassum, Apr 13 '15 at 06:28

is it possible to add
or inside an

6 Answers6

2019 UPDATE

This solution doesn't work anymore.

Linked

is it possible to add or inside an tag?

6 Answers6

2019 UPDATE

This solution doesn't work anymore.

Linked

is it possible to add
or inside an