Đã đăng vào thg 5 25, 2017 4:38 CH 1 phút đọc
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
Here is the first option
The second option
Select box mặc định sẽ như thế này:
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:
Here is the first option
The second option
.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
//bavotasan.com/2011/style-select-box-using-only-css/
All rights reserved
Learn how to create custom select boxes with CSS and JavaScript.
Custom Select Box
Try it Yourself »
Create a Custom Select Menu
Step 1] Add HTML:Example
Select car:
Audi
BMW
Citroen
Ford
Honda
Jaguar
Land Rover
Mercedes
Mini
Nissan
Toyota
Volvo
Step 2] Add CSS:
Example
/* The container must be positioned relative: */
.custom-select {
position: relative;
font-family: Arial;
}
.custom-select select {
display: none; /*hide original SELECT element: */
}
.select-selected {
background-color: DodgerBlue;
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
/* Point the arrow upwards when the select box is open [active]: */
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}
/* style the items [options], including the selected item: */
.select-items div,.select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba[0, 0, 0, 0.1] transparent;
cursor: pointer;
}
/* Style items [options]: */
.select-items {
position: absolute;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba[0, 0, 0, 0.1];
}
Example
var x, i, j, l, ll, selElmnt, a, b, c;
/* Look for any elements with the class "custom-select": */
x = document.getElementsByClassName["custom-select"];
l = x.length;
for [i = 0; i < l; i++] {
selElmnt = x[i].getElementsByTagName["select"][0];
ll = selElmnt.length;
/*
For each element, create a new DIV that will act as the selected item: */
a = document.createElement["DIV"];
a.setAttribute["class", "select-selected"];
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild[a];
/* For each element, create a new DIV that will contain the option list: */
b = document.createElement["DIV"];
b.setAttribute["class", "select-items select-hide"];
for [j = 1; j
< ll; j++] {
/* For each option in the original select element,
create a new DIV that will act as an option item: */
c = document.createElement["DIV"];
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener["click", function[e] {
/* When an item is clicked, update the original select box,
and the selected item: */
var y, i, k, s, h, sl, yl;
s = this.parentNode.parentNode.getElementsByTagName["select"][0];
sl = s.length;
h = this.parentNode.previousSibling;
for [i = 0; i < sl; i++] {
if
[s.options[i].innerHTML == this.innerHTML] {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName["same-as-selected"];
yl = y.length;
for [k = 0; k < yl; k++] {
y[k].removeAttribute["class"];
}
this.setAttribute["class", "same-as-selected"];
break;
}
}
h.click[];
}];
b.appendChild[c];
}
x[i].appendChild[b];
a.addEventListener["click", function[e] {
/* When the select box is clicked, close any other select boxes,
and open/close the current select box: */
e.stopPropagation[];
closeAllSelect[this];
this.nextSibling.classList.toggle["select-hide"];
this.classList.toggle["select-arrow-active"];
}];
}
chức năng CloseallSelect [elmnt] {& nbsp;/* Một hàm sẽ đóng tất cả các hộp chọn trong tài liệu, & nbsp;ngoại trừ hộp chọn hiện tại: */& nbsp;var x, y, i, xl, yl, arrno = []; & nbsp;x = document.getelementsbyClassName ["select-items"]; & nbsp;y = document.getelementsbyClassName ["Chọn chọn"]; & nbsp;xl = x.length; & nbsp;yl = y.length; & nbsp;for [i = 0; i