Chọn tùy chọn nội dung css

Tìm hiểu cách tạo hộp chọn tùy chỉnh bằng CSS và JavaScript

Hộp chọn tùy chỉnh

Tự mình thử »

Tạo Menu chọn tùy chỉnh

Bước 1) Thêm HTML

Ví dụ

Bước 2) Thêm CSS

Ví dụ

/* Vùng chứa phải được định vị tương đối. */
. chọn vị trí {
tùy chỉnh. họ hàng;
  họ phông chữ. Arial;
}

.custom-select select {
  hiển thị. không ai; . */
}

.select-selected {
  màu nền. DodgerBlue;
}

/* Tạo kiểu cho mũi tên bên trong phần tử chọn. */
. chọn lọc. sau {
  vị trí. tuyệt đối;
  nội dung. "";
  trên cùng. 14px;
  phải. 10px;
  chiều rộng. 0;
  chiều cao. 0;
  đường viền. 6px liền khối trong suốt;
  màu viền. #fff trong suốt trong suốt trong suốt;
}

/* Trỏ mũi tên lên trên khi hộp chọn đang mở (hoạt động). */
. chọn lọc. chọn-mũi tên-hoạt động. sau {
  màu viền. trong suốt trong suốt #fff trong suốt;
  trên cùng. 7px;
}

/* tạo kiểu cho các mục (tùy chọn), bao gồm cả mục đã chọn. */
. div chọn mục,. đã chọn đã chọn {
  màu. #ffffff;
  phần đệm. 8px 16px;
  đường viền. 1px trong suốt;
  màu viền. rgba trong suốt trong suốt(0, 0, 0, 0. 1) trong suốt;
  con trỏ. con trỏ;
}

/* Mục kiểu dáng (tùy chọn). */
. select-items {
  vị trí. tuyệt đối;
  màu nền. DodgerBlue;
  trên cùng. 100%;
  còn lại. 0;
  đúng. 0;
  chỉ mục z. 99;
}

/* Ẩn các mục khi đóng hộp chọn. */
. chọn-ẩn {
  hiển thị. không;
}

.select-items div:hover, .same-as-selected {
  background-color. rgb(0, 0, 0, 0. 1);
}

Bước 3) Thêm JavaScript

Ví dụ

var x, i, j, l, ll, selElmnt, a, b, c;
/* Tìm bất kỳ phần tử nào có lớp "chọn tùy chỉnh". */
x = tài liệu. getElementsByClassName("chọn tùy chỉnh");
l = x. độ dài;
for (i = 0; i < l; i++) {
  selElmnt = x[i]. getElementsByTagName("select")[0];
  ll = selElmnt. độ dài;
  /* Đối với mỗi phần tử, hãy tạo một DIV mới sẽ đóng vai trò là mục đã chọn. */
  a = tài liệu. createElement("DIV");
  a. setAttribute("class", "select-selected");
  a. bên trongHTML = selElmnt. tùy chọn[selElmnt. mục lục được chọn]. innerHTML;
  x[i]. appendChild(a);
  /* Đối với mỗi phần tử, hãy tạo một DIV mới chứa danh sách tùy chọn. */
  b = tài liệu. createElement("DIV");
  b. setAttribute("class", "select-items select-hide");
  for (j = 1; j < ll; j++) {
    /* For . */
    create a new DIV that will act as an option item: */
    c = tài liệu. createElement("DIV");
    c. bên trongHTML = selElmnt. tùy chọn[j]. innerHTML;
    c. addEventListener("click", function(e) {
        /* Khi một mục được nhấp, hãy cập nhật hộp chọn ban đầu,
        và mục đã chọn. */
        var y, i, k, s, h, sl, yl;
        s = this. cha mẹNode. cha mẹNode. getElementsByTagName("select")[0];
        sl = s. độ dài;
        h = cái này. cha mẹNode. anh chị em trước đó;
        for (i = 0; i < sl; i++) {
          if (s. tùy chọn [i]. InternalHTML == cái này. innerHTML) {
            s. đã chọnIndex = i;
            h. bên trongHTML = cái này. innerHTML;
            y = this. cha mẹNode. getElementsByClassName("same-as-selected");
            yl = y. độ dài;
            for (k = 0; k < yl; k++) {
              y[k]. removeAttribute("class");
            }
            cái này. setAttribute("class", "same-as-selected");
            break;
          }
        }
        h.click();
    });
    b. appendChild(c);
  }
  x[i]. appendChild(b);
  a. addEventListener("click", function(e) {
    /* Khi hộp chọn được nhấp, hãy đóng bất kỳ hộp chọn nào khác,
    và mở/đóng hộp chọn hiện tại . */
    e. stopPropagation();
    closeAllSelect(this);
    this. tiếp theoAnh chị em. danh sách lớp học. toggle("select-hide");
    this. danh sách lớp học. toggle("select-arrow-active");
  });
}

function closeAllSelect(elmnt) {
  /* Hàm sẽ đóng tất cả các hộp chọn trong tài liệu,
  ngoại trừ hộp chọn hiện tại. */
  var x, y, i, xl, yl, arrNo = [];
  x = tài liệu. getElementsByClassName("select-items");
  y = tài liệu. getElementsByClassName("được chọn");
  xl = x. độ dài;
  yl = y. độ dài;
  for (i = 0; i < yl; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } other {
      y[i]. danh sách lớp học. remove("select-arrow-active");
    }
  }
  for (i = 0; i < xl; . indexOf(i)) {
    if (arrNo.indexOf(i)) {
      x[i]. danh sách lớp học. add("select-hide");
    }
  }
}

/* Nếu người dùng nhấp vào bất kỳ đâu bên ngoài hộp chọn,
thì hãy đóng tất cả các hộp chọn. */
tài liệu. addEventListener("click", closeAllSelect);