Responsive text values in an HTML select menu?

Question

I have a select menu like:

On small screens, I would prefer to use abbreviations

How can I switch between the short and long text dynamically?

My first thought was to use media queries on elements inside the tags, but that doesn't work because can only have text as children:

I could also imagine having different tags show/hide based on media queries:

That kind of works, but it is a bit messy when you consider what it needs to do when the user resizes a window and the currently-selected value needs to switch between "-small" and "-large" - not impossible with some JS I guess, but it doesn't feel right that JS would be required to achieve this. Also feels messy that whatever code is consuming this would then need to be aware of the "-small" and "-large" suffixes in the value.

I know I could use some custom HTML/JS select menu component, but I'd prefer not to do that because using a native select menu has a lot of advantages.

It feels like there should be some better answer, but I haven't been able to figure it out. Any ideas?

user_4356188 · Answer

You can use JavaScript to determine the text that goes inside the options based on the window’s size.

not impossible with some JS I guess, but it doesn't feel right that JS would be required to achieve this.

It can be done with no JavaScript as long as the select tag has its size attribute set to a number greater than 1. This makes the select render as a list and not a drop-down menu. That might not be what you need, but at least no JavaScript is required.

The solution involves pseudo-elements:

option {
  font-size: 0;
}

option::before {
  font-size: 1rem;
  content: attr(value);
}

@media (min-width: 600px) {

  option::before {
    content: attr(title);
  }
}

Responsive text values in an HTML select menu?

1 Answers