JSFiddle - React, Tailwind, and code Playground

by htmlzengarden

HTML

<p>
    <label for="toto">
        Intitulé
        <select id="toto" name="toto">
            <option>Lorem</option>
            <optgroup label="Lettres">
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </optgroup>
            <optgroup label="Chiffres">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </optgroup>
        </select>
    </label>
</p>

CSS

optgroup
{
    color: red;
    font-weight: normal;
    background-color: yellow;
    border: 5px dashed black;
    padding: 1em 0;
    margin: 1em;
    background-image: url(http://www.google.fr/images/srpr/logo3w.png);
}
option
{
    color: green;
}
optgroup option
{
    color: blue;
    font-weight: bold;
    background-color: orange;
    border: 1px solid white;
    padding: 1em 0;
    margin: 1em;
}
select
{
    border: 1px solid black;
    padding: 1em;
}
*
{
    -webkit-appearance: none;
}