Replace mobile browser default fullscreen dropdown

Question

I've looked for solutions but I couldn't find any.

I have a select and few option, here's my example:

I want it to look like this, not this, which is showing on mobile by default.

Is it possible to do so?
Is there any way to do this in CSS?

user_6440543 · Answer

Every browser and operating system renders elements are rendered in mobile browsers with usability and accessibility in mind, so it's advisable not to subvert that, but there are a few different strategies you can use to make them look and behave the way you want.

One of those strategies that takes a css-only approach involves keeping the native, semantic tag in front of the "presentation" layer but setting the native tag to be invisible.

Using the select will then trigger the normal interaction. It's a good option because it preserves the semantic html and avoids having to recreate an interaction that is hard to get right, especially when you factor in mobile experiences and accessibility for keyboard-only users.

And it achieves your goal by creating explicit presentation rules you can enforce for mobile devices.

Here's a contrived example, but you can set your own style rules to make this look the way you want, and you could use media queries to target the devices you have in mind if you choose:

.wrapper {
  position: relative;
  width: max-content;
}

select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* setting the native select to be invisible by setting opacity to 0*/
  opacity: 0;
}

.presentation-select {
  color: black;
  background-color: white;
  font-size: 1rem;
  padding: 4px 8px;
  padding-right: 52px;
  border-radius: 0px;
  border: 1px solid black;
}

.arrow-wrapper {
  position: absolute;
  top: 7px;
  right: 28px;
  pointer-events: none;
}

Hope this was helpful! ✌️

Replace mobile browser default fullscreen dropdown

1 Answers