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

I'm looking to add a colour swatch next to a 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 I try this, and check the source, the span isn't showing up in the select element.

Any help is much appreciated, thanks!