2

I need a Select tag to have the style text-transform: uppercase and the options to be regular case.

This does not seem possible in chrome 69.

J P
  • 65
  • 2
  • 8
  • 1
    I think this thread might be usefull https://stackoverflow.com/questions/8388301/does-text-transform-capitalize-work-for-option-elements-and-if-so-in-which-b/9696637 – MrAr0s Oct 16 '18 at 09:03

2 Answers2

2

This works for me in 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>
Gerard
  • 15,418
  • 5
  • 30
  • 52
0

You can use javascript to capitalize the text inside the selected option element.

// 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>
Danny
  • 1,083
  • 2
  • 8
  • 12
  • I am looking for a solution of the select to be uppercase and the option to be regular case. – J P Oct 16 '18 at 13:37
  • Just to be clear when you say "_select to be uppercase and the option to be regular case_" do you mean that you want the 1st option of the select element to be rendered uppercase and the other options to be rendered as you have written them in your markup? – Danny Oct 16 '18 at 14:24
  • The selected option that shows when the dropdown is closed is Uppercase. And the options when the dropdown is open have no forced casing. – J P Oct 16 '18 at 15:54
  • @JP Since the OS is in control of how certain form elements are rendered I don't think you can change the styling with CSS. You can, however, use javascript to make the text uppercase. I've updated my answer to reflect this. – Danny Oct 16 '18 at 16:09
  • Thanks. Not quite what im looking for. Looking for a solution that any selected option becomes uppercase when being shown as the selected option and remains lowercase in the dropdown. – J P Oct 25 '18 at 14:13
  • @JP I've updated my solution to this problem, please find the documentation in the comments. The solution should also work for select elements that allow for multiple options to be selected at once – Danny Oct 25 '18 at 18:05