HTML Select Option Separator

html select option separator

The disabled option approach seems to look the best and be the best supported. I've also included an example of using the optgroup.

optgroup (this way kinda sucks):

<select>    <optgroup>        <option>First</option>    </optgroup>    <optgroup label="_________">        <option>Second</option>        <option>Third</option>    </optgroup></select>

Adding separator between arrow icon and text in select

Wrap the select in another DIV (eg. custom-select-wrapper) and use a CSS psuedo element for the border...

https://www.codeply.com/go/edxDmWNLx6

<div class="custom-select-wrapper">
  <select classs="custom-select">
    <option>opt1</option>
    <option>opt2</option>
    <option>opt3</option>
  </select>
</div>

CSS

.custom-select-wrapper {
 position: relative
}
.custom-select-wrapper:after {
  border-left: 2px solid #ccc;
  content:"\00a0";
  position: absolute;
  top: 0;
  right: 46px;
  z-index: 2;
  display:block;
  height: 38px;
}

Display HTML Select box Based on Selecting Option From Other Select box Noob Question

On line 20-27, you have a multiline string with " quotes. You can't create multine strings using " in JS without adding \ to the end of each line. So simply replace the " with ` where you need to create a multi-line string like this: x.innerHTML = `<label for="carsyo">Choose a yingyang</label>

The better option would be to include the second select directly in your HTML and show/hide it like this.

Unable to show HTML select option initially when starting the page in Angular

you should fill statusFilter with "Choose" value in the "ts" file.

statusFilter = 'Choose';

---

Related Topics