Hướng dẫn custom option>

Question

Nội dung chính Show

Custom Select Box
Create a Custom Select Menu

Đã đă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

<select>
  <option>Here is the first optionoption>
  <option>The second optionoption>
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 đẹp hơn, hiển thị được tốt trên nhiều trì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 optionoption>
      <option>The second optionoption>
   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/

Learn how to create custom select boxes with CSS and JavaScript.

Custom Select Box

Try it Yourself »

Step 1) Add HTML:

Example

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);
}

Step 3) Add JavaScript:

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 /* A function that will close all select boxes in the document,
except the current select box: */
var x, y, i, xl, yl, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
xl = x.length;
yl = y.length;
for (i = 0; i < yl; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
}
for (i = 0; i < xl; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
}
}

/ * Nếu người dùng nhấp vào bất cứ nơi nào bên ngoài hộp chọn, sau đó đóng tất cả các hộp chọn: */document.addeventListener ("Nhấp", ClinEallSelect);
then close all select boxes: */
document.addEventListener("click", closeAllSelect);

Hãy tự mình thử »

programming css Custom option> CSS select option Select CSS Select box HTML Select HTML CSS Select option Bootstrap

Hướng dẫn custom option>

Select box mặc định

Custom select box bằng CSS

Tham khảo

Custom Select Box

Create a Custom Select Menu

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

Step 3) Add JavaScript:

Example

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội