1

I have a select menu with options

In Firefox, it has an "arrow button" enter image description here

In Chrome/Edge, it doesn't

enter image description here

How do I make it so that the Firefox "expand menu" button looks like Chrome/Edge?

<select>
<option>Example</option>
<option>Example</option>
<option>Example</option>
<option>Example</option>
</select>
Spectric
  • 30,714
  • 6
  • 20
  • 43
Steve Alereza
  • 133
  • 1
  • 8

1 Answers1

0

Some linear-gradient background-image hacks:

select {
  /* styling */
  background-color: black;
  color: white;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select.classic {
  background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%), linear-gradient(to right, black, black);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
  background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
  background-repeat: no-repeat;
}
<select class="classic">
  <option>Option</option>
  <option>Option</option>
  <option>Option</option>
</select>
Spectric
  • 30,714
  • 6
  • 20
  • 43
  • Cool! I just want to keep the arrow but get rid of the button around. The extra CSS for colors will be covered by something else – Steve Alereza May 09 '21 at 23:08
  • @SteveAlereza I've updated the answer to include less unnecessary CSS. Some padding is required for positioning though. – Spectric May 09 '21 at 23:15