选择框选项上的文本转换

Question

我需要一个Select标记以具有文本转换样式：大写字母和选项应为大写字母。

在Chrome 69中似乎无法实现。

Answer 1

这在Chrome 69中对我有效

option {
  text-transform: none;
}

select {
  text-transform: uppercase;
  width: 5rem;
}

<select>
  <option></option>
  <option>one</option>
  <option>Two</option>
  <option>tHREe</option>
</select>

Answer 2

您可以使用javascript将所选option元素内的文本大写。

// get the select element

let select = document.querySelector("select");

// create a store for each options text values
let store = [];

for (let option of select ) {
  store.push(option.text);
}

// resets the last selected option's text back to it's default value 
function reset() {
  Array.prototype.map.call(select, option => {
    
    for(let text of store) {
      if(text.toUpperCase() == option.text) option.text = text;
    }
    
  });
}

// add the handler function for each time the select option is changed
select.addEventListener("change",  function (e) {
  if(this.selectedIndex == -1 ) return;
  
  reset();
  
  for( let selected of this.selectedOptions ) {
    selected.text =  selected.text.toUpperCase();
  }
  
});

<select>
  <option></option>
  <option>Some text</option>
  <option>Some text</option>
  <option>Some text</option>
</select>