Ẩn mũi tên Dropdown (Select) với CSS appearance

Giới thiệu

Thuộc tính appearance cho phép kiểm soát giao diện native của trình duyệt cho form control. Dùng appearance: none để ẩn mũi tên mặc định của <select> và spinner của <input type="number">, sau đó style tùy chỉnh.

Cú pháp

selector {
    appearance: none;
    -webkit-appearance: none;  /* Safari, Chrome */
    -moz-appearance: none;     /* Firefox */
}

Ví dụ 1: Ẩn spinner cho input type="number"

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hide Number Input Spinner</title>
    <style>
        * { box-sizing: border-box; }
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }
        
        .numberInput {
            width: 80px; padding: 0.75rem 1rem;
            border: 2px solid #e0e0e0; border-radius: 8px;
            font-size: 1.2rem; text-align: center;
            /* Ẩn spinner */
            -moz-appearance: textfield;           /* Firefox */
        }
        .numberInput::-webkit-outer-spin-button,
        .numberInput::-webkit-inner-spin-button {
            -webkit-appearance: none;             /* Chrome, Safari, Edge */
            margin: 0;
        }
        .numberInput:focus { outline: none; border-color: #8e24aa; box-shadow: 0 0 0 3px rgba(142, 36, 170, 0.2); }
        .numberInput:hover { background: #f8f4fc; }
        
        label { font-weight: 600; color: #2c3e50; }
    </style>
</head>
<body>
    <label>Số lượng: <input type="number" class="numberInput" value="6" min="1" max="100"></label>
    <p style="color:#666; font-size:0.9rem;">Mũi tên tăng/giảm đã bị ẩn. Dùng bàn phím hoặc custom buttons.</p>
</body>
</html>

Ví dụ 2: Custom Select Dropdown hoàn chỉnh

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Custom Select Dropdown</title>
    <style>
        * { box-sizing: border-box; }
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 2rem; display: flex; flex-direction: column; gap: 2rem; align-items: center; background: #fafafa; }
        
        .selectWrapper {
            position: relative;
            width: 100%; max-width: 300px;
        }
        .selectWrapper::after {
            /* Custom mũi tên dropdown */
            content: "";
            position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
            width: 0; height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 8px solid #666;
            pointer-events: none; /* Click qua mũi tên vào select */
        }
        
        .customSelect {
            width: 100%; padding: 1rem 3rem 1rem 1rem; /* Padding right cho mũi tên */
            border: 2px solid #e0e0e0; border-radius: 10px;
            font-size: 1rem; color: #333; background: white;
            /* Ẩn mũi tên native */
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .customSelect:hover { border-color: #b0b0b0; }
        .customSelect:focus { outline: none; border-color: #8e24aa; box-shadow: 0 0 0 3px rgba(142, 36, 170, 0.2); }
        
        /* Style option (hạn chế - tùy OS) */
        .customSelect option { padding: 0.5rem; }
        
        /* Placeholder style */
        .customSelect option[disabled]:first-child { color: #999; }
        
        /* Disabled state */
        .customSelect:disabled { background: #f5f5f5; color: #999; cursor: not-allowed; }
    </style>
</head>
<body>
    <h2 style="color:#2c3e50;">Custom Select Dropdown</h2>
    
    <div class="selectWrapper">
        <select class="customSelect">
            <option value="" disabled selected hidden>Chọn màu sắc</option>
            <option value="red">🔴 Đỏ</option>
            <option value="blue">🔵 Xanh dương</option>
            <option value="green">🟢 Xanh lá</option>
            <option value="yellow">🟡 Vàng</option>
            <option value="orange">🟠 Cam</option>
        </select>
    </div>
    
    <div class="selectWrapper">
        <select class="customSelect" disabled>
            <option value="" disabled selected>Disabled select</option>
            <option>Không thể chọn</option>
        </select>
    </div>
</body>
</html>

Ví dụ 3: Select với Icon/Flag (Background Image)

.selectWithIcon {
    appearance: none;
    padding-left: 40px; /* Chỗ cho flag */
    background: white url('https://flagcdn.com/16x12/vn.png') no-repeat 12px center / 24px 16px;
    background-size: 24px 16px;
}

Lưu ý quan trọng

• Không thể style <option> hoàn toàn: Chỉ được color, background, font - do OS render.
• Custom dropdown phức tạp: Cần JS (tạo <div> giả lập, xử lý keyboard, ARIA) - xem thư viện như Select2, Choices.js, Tom Select.
• Accessibility: Luôn giữ <select> native để screen reader, keyboard navigation hoạt động. Chỉ ẩn mũi tên, không replace element.
• Firefox: Cần -moz-appearance: none cho select, textfield cho number input.

Browser Support

• appearance: none: Chrome 84+, Firefox 80+, Safari 15.4+, Edge 84+ (unprefixed).
• Tiền tố -webkit-, -moz- vẫn cần cho bản cũ.
• ::-webkit-inner-spin-button chỉ WebKit/Blink.