- vừa được xem lúc

Custom Select Box CSS

0 0 18

Người đăng: Ho Hoang Lam

Theo Viblo Asia

Tùy chỉnh select box bằng cách sử dụng css mà không cần dùng javascript hoặc jquery, điều đó giúp tối ưu website rất nhiều và dễ dàng tích hợp trên web với đoạn css đơn giản.

Select box mặc định

<select> <option>Here is the first option</option> <option>The second option</option>
</select>

Select box mặc định sẽ như thế này: Với hộp select box cổ điển của trình duyệt khi biên địch HTML trông khá đơn giản và không thực sự ấn tượng. Để custom select box trở nên đẹp hơn và phù hơn trong các giao diện web có nhiều cách và đa phần là dùng thư viện Javascript và jQuery để custom.

Custom select box bằng CSS

Bằng cách sử dụng CSS chúng ta không cần phải nhúng thêm bất kỳ thư viện nào hết, chỉ cần đoạn CSS đơn giản select box mặc định sẽ trông đẹp hơn với những màu sắc, background khác đẹp hơn, hiển thị được tốt trên nhiều trình duyệt web hiện nay. Để làm thế, bạn chỉ cần thêm style cho thẻ select là được. Ví dụ:

  • Để đổi màu sắc background:
select { background-color: #29ad1a;
}
  • Hoặc làm tròn góc của select box:
select { border-radius: 5px;
}

Kết quả sẽ là như thế này:

  • Để ẩn đi mũi tên mặc định của select box ta sẽ thêm các thuộc tính:
select { /*for firefox*/ -moz-appearance: none; /*for chrome*/ -webkit-appearance:none; appearance: none;
}
/*for IE10+*/
select::-ms-expand { display: none;
}

Nếu bạn muốn việc ẩn mũi tên hoạt động ngay cả trên IE9 thì ta sẽ làm như sau:

<div class="styled-select"> <select> <option>Here is the first option</option> <option>The second option</option> </select>
</div>
.styled-select { border: 1px solid; overflow: hidden; width: 135px; } .styled-select select { width: 149px;
}

Kết quả là:


Trên đây là một số custom select box bằng css, chúc các bạn sẽ tạo được select box đẹp như ý.

Tham khảo

https://bavotasan.com/2011/style-select-box-using-only-css/

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 496

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 373

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 691

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 334

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 417

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 413