html - Can I nest an element inside a form's select tag? -

i'm looking add colour swatch next bunch of colour options, ie...

markup:

<select class="form-control required" name="stripe-form-color">     <option>pacific blue <span class="blue"></span></option> </select> 

css:

form select span {     margin-left: 10px;     height: 10px;     width: 10px;     border: 1px solid #000; }  form .blue {     background: #27a9d4; } 

when try this, , check source, span isn't showing in select element.

any appreciated, thanks!

no. elements allowed inside select tag option , optgroup. if you've ever taken @ selects you'll notice browsers take complete control on styling; you'll see pure, unstyled, black text inside select. if you've seen else, wasn't native select.

so you'll need use custom solution achieve desired goal. try jquery.chosen, or attempt build own.