Custom Select Box CSS Only

Custom Select Box CSS Only

Custom select box với css không cần phải dùng Javascript hoặc một thư viện Jquery nào. Điều này giúp tối ưu website rất nhiều và dẻ dàng tích hợp lên ...

QTranslate Phần Mềm Dịch Online Không Thể Thiếu
The Voice – Giọng Hát Việt 2017 Tập 3 Full HD
Sing My Song – Bài Hát Hay Nhất 2016 Tập 6 : Vòng Trại Sáng Tác

Custom select box với css không cần phải dùng Javascript hoặc một thư viện Jquery nào. Điều này giúp tối ưu website rất nhiều và dẻ dàng tích hợp lên web với đoạn CSS rất đơn giản.

Với hộp DropDown Select Box cổ điên của trình duyệt khi biên địch HTML trong thật đơn giản và không ấn tượng một tí nào. Về mặt UXUY thì tương đôi chư không được tuyệt đối.

Để custom select box trong đẹp hơn và phù hợp với các giao diện website có rất nhiều cách và cách nhiều nhất đa phần là dùng thư viện JavascriptjQuery để custom.

Sử dụng CSS với lợi thế không cần nhúng thêm thư viện nào hết chỉ cần đoạn css đơn giản và và phù hợp với nhiều trình duyệt web hiện nay.

HTML:

 
<div class="select-style">
  <select>
    <option value="1">Option 01</option>
    <option value="2">Option 02</option>
    <option value="3">Option 03</option>
    <option value="4">Option 04</option>
  </select>
</div>

CSS:

 
.select-style {
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    width: 120px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #fff;

    background: #fff url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif") no-repeat 90% 50%;
}

.select-style select {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.select-style select:focus {
    outline: none;
}

Demo custom select box CSS only: 

Đơn giản nhưng rất hiệu quả đúng không nào? Hãy lựa chọn cách tốt nhất cho trang web mình nhé!

Bình Luận