JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="has-select">
    <select id="select-text">
        <option>Quisque id mi</option>
        <option>Maecenas tempus tellus eget</option>
        <option>Maecenas vestibulum</option>
        <option>Morbi mollis tellus ac</option>
        <option>Vestibulum</option>
    </select>
    <label for="select-text"></label>
</div>

SCSS

.has-select{
    margin: 40px 0;
    position: relative;
    overflow-x: hidden;
    & > select{
        color: #333;
        font-size: 1.25rem;
        cursor: pointer;
        background-color: #fff;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 14px;
        //min-height: 65px;
        $border-size: 4px;
        border: $border-size solid #ccc;
        &:hover{
            border-color: #bbb;
            & + label{
                background-color: #bbb;
            }
        }
        &:active,
        &:focus{
            border-color: #333;
            & + label{
                background-color: #333;
                color: #fff;
            }
        }
        & + label{
            color: #333;
            display: block;
            pointer-events: none;
            position: absolute;
            top: $border-size;
            bottom: $border-size;
            right: 0;
            min-width: 60px;
            font-size: 1rem;
            background-color: #ccc;
            &:after{
                content: "▼";
                display: block;
                width: 100%;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                text-align: center;
            }
        }
        & > option{
            background: #fff;
        }
    }
}