<label>
        <h2>Selects</h2>
        <select id="selects" name="selects">
            <option value="">Select One</option>
            <option value="select1">select1</option>
            <option value="select2">select2</option>
            <option value="select3">select3</option>
        </select>
    </label>
        body {
            display: flex;
            height: 100vh;
            align-items: center;
            justify-content: center;
            background: #262626
        }

        select {
            border: none;
            border-radius: 20px;
            background: #cd5a5a;
            padding: 8px;
            outline: none;
            color: #fff;
            font-family: Verdana;
            transition: .5s;
            font-size: 20px;
        }

            select:hover {
                transform: scale(1.3)
            }

        h2 {
            text-align: center;
            text-transform: uppercase;
            color: #cd5a5a;
            font-family: Verdana;
        }
    document.getElementById("selects").onchange = function () {
            message()
        }

        function message() {
            alert("Your choice has changed: " + event.target.value)
        }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.