Styled Select Dropdown

<!DOCTYPE html>
<title>My Example</title>

/* -- The Custom Arrow -- */
.custom-select-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #555; /* This creates the downward-pointing triangle */
    pointer-events: none; /* The arrow doesn't block clicks */
}
/* -- The Select Element Itself -- */
.custom-select {
    /* Hide the default browser arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

/* General styling */
    width: 100%;
    padding: 12px 40px 12px 15px; /* Add padding to the right to not overlap the custom arrow */
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
}
.custom-select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
</style>

<div class="select-container">
    <h3>Choose a Category:</h3>
    <div class="custom-select-wrapper">
        <select class="custom-select" name="category" id="category">
            <option value="">-- Please select --</option>
            <option value="electronics">Electronics</option>
            <option value="fashion">Fashion</option>
            <option value="home_garden">Home & Garden</option>
            <option value="books">Books</option>
            <option value="sports">Sports & Outdoors</option>
        </select>
    </div>
</div>