How to remove the arrow from a select element in Firefox

The art of fine-tuning: text-indent and text-overflow

While -moz-appearance: none; is able to achieve much of the objective, sometimes you need tighter control. Combining text-indent and text-overflow, you can create a fine-tuned consistent layout across operating systems:

select {
  -moz-appearance: none; /* Firefox */
  text-indent: 0.01px; /* Tiny tweak for a major impact. */
  text-overflow: ''; /* No spilling over of text please! */
}


The hide-n-seek game ends here. text-indent helps to adjust the text's position just enough to hug the select's border thus hiding any leftover graphical traces.

Crossing the browser barrier: Ensuring compatibility

Making your CSS codes compatible across various browsers is vital. Apart from -moz-appearance: none; for Firefox, include -webkit-appearance: none; to ensure similar results with Chrome and Safari:

select {
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Chrome, Safari. A simple line that saves the day! */
  appearance: none; /* Other browsers, 'cuz why should they feel left out? */
}


Prioritizing performance: Balancing beauty and functionality

Making your website look good is important but remember, function trumps form. Make sure the stylish changes do not prevent users from having a smooth interaction with the select element.

Laying out the contingency plan: Graceful degradation

Don't let your users on an older browser version struggle. Ensure your styles degrade well in browsers that might not support properties like appearance - maintaining a basic, if not a styled, select element.

Beyond the essentials: Advanced customizations

The art of disguise with a wrapper element

Wrap the select field in a custom-styled span and voila, you've just managed to mask the default arrow!

<span class="select-style">
  <select>
    <!-- options go here -->
  </select>
</span>


Position your custom-styled .select-style to emulate a dropdown button while keeping the functional, albeit invisible, select field underneath.

When the task demands a little more: CSS Libraries

For a redesigned dropdown experience, you can turn to Chosen, a jQuery plugin that reformats long, difficult to manage selects into a user-friendly display.

Bit-part actors having a major role: Pseudo-elements

There might be instances when you're unable to use background images or external libraries. Here's where you can simulate an inner element using CSS pseudo-elements:

select::after {
  content: '▼'; /* Custom symbol or text, 'cos who doesn't like customizations! */
  position: absolute;
  /* Style it up */
}


The pseudo-element ::after helps you create a custom indicator symbol for the select element.