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 ...

Phần Mềm FastStone Capture 8.4 : Quay Và Chụp Màn Hình Mày Tính Full Key
Thần Tượng Bolero 2017 Tập 5
Giọng Hát Việt 2017 Tập 10

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