Random thoughts & observations

From the mundane to the profound and everything in between here’s what’s rocking our world

Customising a form select menu with CSS

Posted: April 11, 2015
Written by: Saints At Play
Category: CSS

CSS, when combined with modern browser support for the latest technologies, allows front-end developers a wider palette of options for crafting website and app interfaces than was possible 10 years ago. In this short tutorial we'll take you through how to customise a standard HTML select menu using nothing more complicated than CSS.

But first...some caveats

When we say modern browser support we specifically mean ONLY the following browsers:

  • Chrome
  • Safari
  • Firefox
  • iOS
  • Android

Unfortunately even the latest versions of Internet Explorer won't allow the following techniques to be used - we'll explain why in the next section - which effectively leaves you with 2 options if you want to use this technique in your projects:

  1. Opt for a jQuery (or similar) solution to providing customised select menus
  2. Choose a graceful degradation approach to allow users with older/non-supporting browsers to see the unstyled, default select menu

There is, of course, nothing wrong with default styled HTML select menus but it's a shame to not be able to customise them if your browser doesn't offer support to do this.

It's not just Internet Explorer

There is an unofficial standard for customising the appearance of elements such as select menus - which is aptly titled appearance, but none of the major browser vendors actually support it. Instead we, as front-end developers, are left to rely on the following vendor prefixed rules (unless, as stated above, we opt for a JavaScript solution such as a jQuery widget instead):

That might not give us the greatest scope for development but it does allow us to at least provide a more enhanced experience for those browsers that support the above vendor prefixes; namely Firefox and Webkit based browsers.

Given that the latest versions of Opera have started to use the webkit rendering engine it's a little frustrating that the techniques to follow still aren't fully supported in that browser - the default menu arrow remains regardless of customisation. With Opera it feels like a case of almost, but not quite.

With all of the above in mind let's look at how we could use these vendor prefixes in a project.

It's all about the rules

Let's say we have a pretty standard HTML page that looks something like this:

<html>
  <head>
    <title>Simple web form</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <form>
      <select>
        <option value="" selected>Rate your favourite browser</option>
          <option value="Apple Safari">Apple Safari</option>
          <option value="Google Chrome">Google Chrome</option> 
          <option value="Internet Explorer">Internet Explorer</option>
          <option value="Mozilla Firefox">Mozilla Firefox</option>
          <option value="Opera">Opera</option>
        </select>
        <input type="submit" name="submit-btn" value="Submit">
     </form>
  </body>
</html>

Nothing terribly complicated, just a simple structure we can use to test out those vendor prefixes.

Now in your external stylesheet named styles.css enter the following style rule:

  select {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    -moz-appearance: none;
    border: 0;
    background: rgb(220, 55, 34);
    width: 200px;
    padding: 10px 20px;
}

What we're doing here is removing the default HTML style applied to the select menu by the browser with the following rules:

  • -webkit-appearance: none - targets webkit supporting browsers such as Safari, Chrome, iOS, Android and, to some degree, Opera
  • -moz-appearance: none - targets Mozilla Firefox

We also use the following rule to remove the default rounded corners that Safari and Chrome apply to HTML select menus:

  • -webkit-border-radius: 0

​We then remove the default border that is applied by the browser, choose a specific background colour for our customised select menu and follow this with some general style rules for width and padding.

If you were to run the above HTML and CSS in the browser you'd see something resembling the following:

Customised drop down menu with red background

That's interesting but a little unfriendly as it doesn't give the user a visual indication of what that element is designed to do, in fact it could easily be mistaken for a button. Let's rectify this by modifying the background rule in our CSS to add an image to the select menu like so:

  select {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    -moz-appearance: none;
    border: 0;
    background: rgb(220, 55, 34) url('images/arrow-down.png') no-repeat 95% center;
    width: 200px;
    padding: 10px 20px;
}

This will give you the following (depending on the choice of background graphic of course):

Customised drop down menu with added arrow graphic

While we're at it we can also leverage the power of the -webkit-appearance and -moz-appearance properties to improve the look and feel of our submit button too by adding the following rule to our styles.css file:

  input[type="submit"] {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    -moz-appearance: none;
    border: 0;
    background: rgb(220, 55, 34);
    color: rgb(255, 255, 255);
    padding: 10px 20px;
}

Which gives our submit button a far more aesthetically pleasing look:

Customised form submit button with red background

Now, thanks to some simple CSS, we have a far more user-friendly customised select menu (and submit button) albeit only for those browsers that support the -moz-appearance and -webkit-appearance style rules.

But wait....there IS a fix for Internet Explorer

Don't get too excited though; the following rule only works on IE10+:

select::-ms-expand,
input[type="submit"]::-ms-expand {
  display: none;
}

The ms-expand pseudo-selector allows styles to be applied to the dropdown button of a HTML select menu but, as we stated earlier, this only works in IE10 and above. This may, or may not, be an issue concerning the nature of the project but at least it's a step in the right direction for Internet Explorer.

« Return to Posts

Comments

Gravatar
Dr Ayurveda

June 16, 2015

I'm truly enjoying the design and layout of your blog. It's a very
easy on the eyes which makes it much more enjoyable for me to
come here and visit more often. Did you hire out a developer
to create your theme? Excellent work!

Posting comments after three months has been disabled.