JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<select>
    <option>rainbow</option>
    <option>chariot</option>
    <option data-other="^[0-9]*$">any number</option>
</select>

<div class='advancedSelect'>
    <input class='advancedSelectInput' />
    <div class='advancedSelectArrow'>&#9660;</div>
    <div class='advancedSelectDrop'>
        <div class='advancedSelectOption'>rainbow</div>
        <div class='advancedSelectOption'>chariot</div>
        <div class='advancedSelectOtherOption' data-other="^[0-9]*$">any number</div>
    </div>
</div>

<script>
    makeAdvancedSelects();
</script>

CSS

.advancedSelect{
    width:250px;
    height:26px;
    position:relative;
    top:0;
    left:0;
    font-family:serif;
    font-size:16px;
}

.advancedSelectInput{
    width:218px;
    height:24px;
    border:1px solid #bbb;
    padding:0 27px 0 3px;
}

.advancedSelectArrow{
    width:24px;
    height:22px;
    text-align:center;
    position:absolute;
    right:1px;
    top:1px;
    background:#bbb;
    cursor:pointer;
    padding-top:2px;
    color:#333;
}

JavaScript

function makeAdvancedSelects(){
    elements=document.getElementsByTagName('select');
}