Làm cách nào để nhận giá trị của thẻ chọn?

Phần tử này bao gồm các thuộc tính toàn cục

Một chuỗi cung cấp gợi ý cho tính năng tự động hoàn thành của tác nhân người dùng. Xem Thuộc tính tự động hoàn thành HTML để biết danh sách đầy đủ các giá trị và chi tiết về cách sử dụng tự động hoàn thành

Thuộc tính Boolean này cho phép bạn chỉ định rằng điều khiển biểu mẫu phải có tiêu điểm đầu vào khi tải trang. Chỉ một thành phần biểu mẫu trong tài liệu có thể có thuộc tính

  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  

Thuộc tính Boolean này chỉ ra rằng người dùng không thể tương tác với điều khiển. Nếu thuộc tính này không được chỉ định, điều khiển sẽ kế thừa cài đặt của nó từ phần tử chứa, ví dụ:

  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  

Phần tử

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}

Thuộc tính này cho phép bạn liên kết các phần tử với các

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}

Thuộc tính Boolean này chỉ ra rằng có thể chọn nhiều tùy chọn trong danh sách. Nếu nó không được chỉ định, thì chỉ có thể chọn một tùy chọn tại một thời điểm. Khi

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

Thuộc tính này được sử dụng để chỉ định tên của điều khiển

Một thuộc tính Boolean cho biết rằng phải chọn một tùy chọn có giá trị chuỗi không trống

Nếu điều khiển được trình bày dưới dạng hộp danh sách cuộn [e. g. khi

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

const selects = custom.querySelectorAll['select'];
for [const select of selects] {
  const div = document.createElement['div'];
  const header = document.createElement['div'];
  const datalist = document.createElement['datalist'];
  const optgroups = select.querySelectorAll['optgroup'];
  const span = document.createElement['span'];
  const options = select.options;
  const parent = select.parentElement;
  const multiple = select.hasAttribute['multiple'];
  function  title[e] {
    const disabled = this.hasAttribute['data-disabled'];
    select.value = this.dataset.value;
    span.innerText = this.dataset.label;
    if [disabled] return;
    if [multiple] {
      if [e.shiftKey] {
        const checked = this.hasAttribute["data-checked"];
        if [checked] {
          this.removeAttribute["data-checked"];
        } else {
          this.setAttribute["data-checked", ""];
        }
      } else {
        const options = div.querySelectorAll['.option'];
        for [let i = 0; i  {
    if [!multiple] {
      const open = this.hasAttribute["data-open"];
      e.stopPropagation[];
      if [open] {
        div.removeAttribute["data-open"];
      } else {
        div.setAttribute["data-open", ""];
      }
    }
  };

  div.onkeyup = [event] => {
    event.preventDefault[];
    if [event.keyCode === 13] {
      div.click[];
    }
  };

  document.addEventListener['click', [e] => {
    if [div.hasAttribute["data-open"]] {
      div.removeAttribute["data-open"];
    }
  }];

  const width = Math.max[...Array.from[options].map[[e] => {
    span.innerText = e.label;
    return div.offsetWidth;
  }]];

  console.log[width];
  div.style.width = `${width}px`;
}
document.forms[0].onsubmit = [e] => {
  const data = new FormData[this];
  e.preventDefault[];
  submit.innerText = JSON.stringify[[...data.entries[]]];
};

Ghi chú. Theo đặc tả HTML, giá trị mặc định cho kích thước phải là

const selects = custom.querySelectorAll['select'];
for [const select of selects] {
  const div = document.createElement['div'];
  const header = document.createElement['div'];
  const datalist = document.createElement['datalist'];
  const optgroups = select.querySelectorAll['optgroup'];
  const span = document.createElement['span'];
  const options = select.options;
  const parent = select.parentElement;
  const multiple = select.hasAttribute['multiple'];
  function  title[e] {
    const disabled = this.hasAttribute['data-disabled'];
    select.value = this.dataset.value;
    span.innerText = this.dataset.label;
    if [disabled] return;
    if [multiple] {
      if [e.shiftKey] {
        const checked = this.hasAttribute["data-checked"];
        if [checked] {
          this.removeAttribute["data-checked"];
        } else {
          this.setAttribute["data-checked", ""];
        }
      } else {
        const options = div.querySelectorAll['.option'];
        for [let i = 0; i  {
    if [!multiple] {
      const open = this.hasAttribute["data-open"];
      e.stopPropagation[];
      if [open] {
        div.removeAttribute["data-open"];
      } else {
        div.setAttribute["data-open", ""];
      }
    }
  };

  div.onkeyup = [event] => {
    event.preventDefault[];
    if [event.keyCode === 13] {
      div.click[];
    }
  };

  document.addEventListener['click', [e] => {
    if [div.hasAttribute["data-open"]] {
      div.removeAttribute["data-open"];
    }
  }];

  const width = Math.max[...Array.from[options].map[[e] => {
    span.innerText = e.label;
    return div.offsetWidth;
  }]];

  console.log[width];
  div.style.width = `${width}px`;
}
document.forms[0].onsubmit = [e] => {
  const data = new FormData[this];
  e.preventDefault[];
  submit.innerText = JSON.stringify[[...data.entries[]]];
};

Trên máy tính để bàn, có một số cách để chọn nhiều tùy chọn trong phần tử có thuộc tính

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

Người dùng chuột có thể giữ các phím Ctrl, Command hoặc Shift [tùy thuộc vào ý nghĩa của hệ điều hành của bạn] rồi nhấp vào nhiều tùy chọn để chọn/bỏ chọn chúng

Cảnh báo. Cơ chế chọn nhiều mục không liền kề qua bàn phím được mô tả dưới đây dường như chỉ hoạt động trong Firefox

Trên macOS, các phím tắt Ctrl + Lên và Ctrl + Xuống xung đột với các phím tắt mặc định của hệ điều hành cho các cửa sổ Ứng dụng và Điều khiển nhiệm vụ, vì vậy bạn sẽ phải tắt các phím tắt này trước khi phím tắt hoạt động

Người dùng bàn phím có thể chọn nhiều mục liền kề bằng cách

• Tập trung vào yếu tố [e. g. sử dụng Tab ]
• Chọn một mục ở trên cùng hoặc dưới cùng của phạm vi mà họ muốn chọn bằng cách sử dụng các phím con trỏ Lên và Xuống để đi lên và xuống các tùy chọn
• Giữ phím Shift và sau đó sử dụng các phím con trỏ Lên và Xuống để tăng hoặc giảm phạm vi các mục đã chọn

Người dùng bàn phím có thể chọn nhiều mục không liền kề bằng cách

• Tập trung vào yếu tố [e. g. sử dụng Tab ]
• Giữ phím Ctrl rồi sử dụng các phím con trỏ Lên và Xuống để thay đổi tùy chọn chọn "tiêu điểm", tôi. e. cái sẽ được chọn nếu bạn chọn làm như vậy. Tùy chọn chọn "tiêu điểm" được đánh dấu bằng đường viền chấm, giống như cách liên kết tập trung vào bàn phím
• Nhấn Space để chọn/bỏ chọn các tùy chọn chọn "tiêu điểm"

Phần tử nổi tiếng là khó tạo kiểu hiệu quả bằng CSS. Bạn có thể tác động đến một số khía cạnh như bất kỳ yếu tố nào — ví dụ: thao tác với mô hình hộp, phông chữ được hiển thị, v.v. , và bạn có thể sử dụng thuộc tính 6 để xóa hệ thống mặc định 6

Tuy nhiên, các thuộc tính này không tạo ra kết quả nhất quán trên các trình duyệt và rất khó để thực hiện những việc như sắp xếp các loại phần tử biểu mẫu khác nhau trong một cột với nhau. Cấu trúc bên trong của phần tử rất phức tạp và khó kiểm soát. Nếu bạn muốn có toàn quyền kiểm soát, bạn nên cân nhắc sử dụng một thư viện có các phương tiện tốt để tạo kiểu dáng cho các tiện ích biểu mẫu hoặc thử cuộn menu thả xuống của riêng bạn bằng cách sử dụng các phần tử phi ngữ nghĩa, JavaScript và WAI-ARIA để cung cấp ngữ nghĩa

Để biết thêm thông tin hữu ích về kiểu dáng , hãy xem

• Tạo kiểu biểu mẫu HTML
• Kiểu dáng nâng cao cho biểu mẫu HTML

Ngoài ra, hãy xem ví dụ "Tùy chỉnh kiểu chọn" bên dưới để biết ví dụ về việc bạn có thể thử tạo kiểu đơn giản

Ví dụ sau tạo một menu thả xuống rất đơn giản, tùy chọn thứ hai được chọn theo mặc định

  First Value
  Second Value
  Third Value

Ví dụ sau đây phức tạp hơn, hiển thị nhiều tính năng hơn mà bạn có thể sử dụng trên phần tử ______ 46 ______

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

bạn sẽ thấy rằng

• Có thể chọn nhiều tùy chọn vì chúng tôi đã bao gồm thuộc tính

  Please choose one or more pets:
    
      
        Dog
        Cat
        Hamster
      
      
        Parrot
        Macaw
        Albatross
      
    
  
  

  8
• Thuộc tính

  Please choose one or more pets:
    
      
        Dog
        Cat
        Hamster
      
      
        Parrot
        Macaw
        Albatross
      
    
  
  

  9 chỉ hiển thị 4 dòng tại một thời điểm;
• Chúng tôi đã bao gồm các yếu tố

  
    
      Standard controls
      
        Carrots
        Peas
        Beans
        Pneumonoultramicroscopicsilicovolcanoconiosis
      
    
    
      Custom controls
      
        Carrots
        Peas
        Beans
        Pneumonoultramicroscopicsilicovolcanoconiosis
      
    
  
  

  4 để chia các tùy chọn thành các nhóm khác nhau. Đây là một nhóm hoàn toàn trực quan, trực quan hóa của nó thường bao gồm tên nhóm được in đậm và các tùy chọn được thụt vào
• Tùy chọn "Hamster" bao gồm thuộc tính

  
    
      Standard controls
      
        Carrots
        Peas
        Beans
        Pneumonoultramicroscopicsilicovolcanoconiosis
      
    
    
      Custom controls
      
        Carrots
        Peas
        Beans
        Pneumonoultramicroscopicsilicovolcanoconiosis
      
    
  
  

  1 và do đó không thể chọn được

Ví dụ này cho thấy cách bạn có thể sử dụng một số CSS và JavaScript để cung cấp kiểu dáng tùy chỉnh mở rộng cho hộp

Ví dụ này về cơ bản

• Sao chép bối cảnh của [các

  Please choose one or more pets:
    
      
        Dog
        Cat
        Hamster
      
      
        Parrot
        Macaw
        Albatross
      
    
  
  

  0] trong trình bao bọc gốc và thực hiện lại hành vi dự kiến ​​tiêu chuẩn bằng cách sử dụng các phần tử HTML và JavaScript bổ sung. Điều này bao gồm hành vi tab cơ bản để cung cấp khả năng truy cập bàn phím
• Ánh xạ một số tiêu chuẩn gốc từ 9 đến id0 của các phần tử mới để quản lý trạng thái và CSS

Ghi chú. Không phải tất cả các tính năng gốc đều được hỗ trợ, đó là Bằng chứng về khái niệm. CNTT bắt đầu từ HTML tiêu chuẩn nhưng có thể đạt được kết quả tương tự khi bắt đầu từ dữ liệu JSON, HTML tùy chỉnh hoặc các giải pháp khác

HTML

  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  

CSS

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}

JavaScript

const selects = custom.querySelectorAll['select'];
for [const select of selects] {
  const div = document.createElement['div'];
  const header = document.createElement['div'];
  const datalist = document.createElement['datalist'];
  const optgroups = select.querySelectorAll['optgroup'];
  const span = document.createElement['span'];
  const options = select.options;
  const parent = select.parentElement;
  const multiple = select.hasAttribute['multiple'];
  function  title[e] {
    const disabled = this.hasAttribute['data-disabled'];
    select.value = this.dataset.value;
    span.innerText = this.dataset.label;
    if [disabled] return;
    if [multiple] {
      if [e.shiftKey] {
        const checked = this.hasAttribute["data-checked"];
        if [checked] {
          this.removeAttribute["data-checked"];
        } else {
          this.setAttribute["data-checked", ""];
        }
      } else {
        const options = div.querySelectorAll['.option'];
        for [let i = 0; i  {
    if [!multiple] {
      const open = this.hasAttribute["data-open"];
      e.stopPropagation[];
      if [open] {
        div.removeAttribute["data-open"];
      } else {
        div.setAttribute["data-open", ""];
      }
    }
  };

  div.onkeyup = [event] => {
    event.preventDefault[];
    if [event.keyCode === 13] {
      div.click[];
    }
  };

  document.addEventListener['click', [e] => {
    if [div.hasAttribute["data-open"]] {
      div.removeAttribute["data-open"];
    }
  }];

  const width = Math.max[...Array.from[options].map[[e] => {
    span.innerText = e.label;
    return div.offsetWidth;
  }]];

  console.log[width];
  div.style.width = `${width}px`;
}
document.forms[0].onsubmit = [e] => {
  const data = new FormData[this];
  e.preventDefault[];
  submit.innerText = JSON.stringify[[...data.entries[]]];
};

Kết quả

Danh mục nội dung, , , , , và phần tửNội dung được phépKhông hoặc nhiều hơn

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    
  

Thẻ chọn có giá trị không?

Giá trị mặc định cho thẻ chọn là gì?

Làm cách nào để lấy giá trị đã chọn trong danh sách thả xuống bằng JavaScript?