Thiết kế web: tùy biến select box với css3

06/05/2020

Thiết kế web: tùy biến select box với css3

Tùy biến Select box (dropdown list) luôn là vấn đề nan giải với những người thiết kế web, bởi phần tử này là một platform object - chịu ảnh hưởng style từ hệ thống chứ không chịu style của trình duyệt (không phải browser object như các phần tử khác). Với sự ra đời của CSS3, những nhà thiết kế web sẽ không còn đau đầu nữa, chỉ với chút mẹo là bạn có thể thiết kế một select box đẹp mắt như hình:

Thiết kế web: tùy biến select box với css3

Đầu tiên, tạo một file html có select box, xem code bên dưới:

<label>

    <select>

        <option selected> Chọn ngôn ngữ </option>

        <option>Tiếng Việt</option>

        <option>Tiếng Anh - Hoa Kỳ</option>

    </select>

</label>​

Thêm CSS tùy biến style cho select box:

body, html {background:#444; text-align:center; padding:50px 0;}

/* CSS FOR SELECT BOX */

select {

    padding:3px;

    margin: 0;

    -webkit-border-radius:4px;

    -moz-border-radius:4px;

    border-radius:4px;

    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;

    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;

    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;

    background: #f8f8f8;

    color:#888;

    border:none;

    outline:none;

    display: inline-block;

    -webkit-appearance:none;

    -moz-appearance:none;

    appearance:none;

    cursor:pointer;

}

/* Targetting Webkit browsers only. FF will show 

the dropdown arrow with so much padding. */

@media screen and (-webkit-min-device-pixel-ratio:0) {

    select {padding-right:18px}

}

label {position:relative}

label:after {

    content:'<>';

    font:11px "Consolas", monospace;

    color:#aaa;

    -webkit-transform:rotate(90deg);

    -moz-transform:rotate(90deg);

    -ms-transform:rotate(90deg);

    transform:rotate(90deg);

    right:8px; top:2px;

    padding:0 0 2px;

    border-bottom:1px solid #ddd;

    position:absolute;

    pointer-events:none;

}

label:before {

    content:'';

    right:6px; top:0px;

    width:20px; height:20px;

    background:#f8f8f8;

    position:absolute;

    pointer-events:none;

    display:block;

}

Bạn thấy đẹp không nào? Trong đoạn css trên, có vài điểm cần lưu ý như sau:

1. Khai báo pointer-events:none giúp loại bỏ các sự kiện phát sinh bởi chuột, như hover, click... lên label, nên khi click label thì sự kiện của phần tử phía dưới (ở đây là select box) sẽ được kích hoạt.

2. Selector :after sẽ append thêm 1 cặp ngoặc <> vào label, sau đó sử dụng rotate trong css3 để xoay 90ᵒ, tạo thành 1 cặp mũi tên lên xuống nhìn rất đẹp mắt. Một mẹo rất hay.