下拉列表问题

本文解决下拉列表的问题，来源为这篇文章完全来源于 change-default-select-dropdown-style-just-css，

网址：http://uplifted.net/programming/change-default-select-dropdown-style-just-css/

In this article I’m going to help you style a Select drop-down input with just CSS without the need for javascript.

Ok let’s get to it!

So here’s the story – The awesome designer in your team sends you a new PSD (Photoshop Document) with the final design of a new website or app. You go through the different documents looking at all the pages that will be be included in the new site.
Everything looks fine and dandy until you see that he/she designed a select drop-down input different from the default style given by the browsers! You say “No way!, doesn’t everyone knows that it’s extremely hard (not really) to change the default styling of a drop-down input!?!?!”

Well the reality is that you shouldn’t complain to the designer because little things like this makes you push yourself a little bit harder and not rely on default stylings just because.

This article is based on two workarounds (One for Chrome and Safari and one for Firefox) already posted on the web. I’m just consolidating this two workarounds in one article.

Credit for Chrome workaround goes to Chris Coyier from CSS-tricks.com
Credit for Firefox workaround goes to João Cunha who posted this on stackoverflow

Ok let’s get started!

Let’s say that the design for the drop-down is this one:

When we add the html for a Select Dropdown we get this:

Firefox Default styling

Chrome Default Styling

Not very pretty.

First to remove the border and default style we just add this to the CSS:
(I gave the select input a class name of .dropdown)

.dropdown select {
      border: 0 !important;.  /*Removes border*/
     -webkit-appearance: none;  /*Removes default chrome and safari style*/
     -moz-appearance: none;  /*Removes default style Firefox*/
  }

It will start to look something like this on Firefox:

On Chrome:

On Safari:

Wow that was easy! but we still need some details.

To add the blue arrow from the design we just slice it from Photoshop and add it as a background-image.

The CSS should look like this:

.dropdown select {
      border: 0 !important;.  /*Removes border*/
     -webkit-appearance: none;  /*Removes default chrome and safari style*/
     -moz-appearance: none;  /*Removes default style Firefox*/
      background: url('you_own_image_arrow.png')  no-repeat;
  }

and this should give you something like this:

We now just have to make the select input wider and tweak the position of the arrow image, in this case I gave the select dropdown a width of 105px (So we have space for the arrow), and a background-position of 82px 7px;
Note: This might be different in your situation.

Your CSS now looks like this:

.dropdown select {
      border: 0 !important;        /*Removes border*/
      -webkit-appearance: none;        /*Removes default chrome and safari style*/
      -moz-appearance: none;          /* Removes Default Firefox style*/
      background: url('dropdown_arrow.png') no-repeat;         /*Adds background-image*/
      background-position: 82px 7px;                /*Position of the background-image*/
      width: 100px;                /*Width of select dropdown to give space for arrow image*/
}

Looks like this on Chrome and Safari:

but this is what you get in Firefox:

Basically the arrow image is behind the firefox default arrow, it’s difficult to remove this default arrow but thanks to João Cunha I was able to fix this.

So to remove this arrow on firefox we need to add to our CSS this:

 text-indent: 0.01px;
 text-overflow: "";

The CSS should look like this now:

.dropdown select {
       border: 0 !important;             /*Removes border*/
      -webkit-appearance: none;            /*Removes default chrome and safari style*/
      -moz-appearance: none;             /* Removes Default Firefox style*/
      background: url('dropdown_arrow.png') no-repeat;          /*Adds background-image*/
      background-position: 82px 7px;           /*Position of the background-image*/
      width: 100px;            /    *Width of select dropdown to give space for arrow image*/
      text-indent: 0.01px;          /* Removes default arrow from firefox*/
      text-overflow: "";               /*Removes default arrow from firefox*/
}

and voilà!!!!

Pure awesomeness if you ask me 

Now you can just style the text as you want.
I added a blue color for the dropdown text so it looks similar to the design.

So my final result looks like this:

So as you can see this works pretty good, the only problem as always is Internet Explorer.
(let me know if you know a way to do this on IE)

This works on Chrome, Firefox, and Safari.

The final HTML:

<div class="dropdown">
      <p>Show: </p>
    
        <select>
         <option> 18 per page</option>
         <option> 10 per page</option>
         <option> 5 per page</option>

       </select>
</div> <!-- DropDown -->

and the CSS:

.dropdown p {
	display: inline-block;
	font-weight: bold;
}

.dropdown select {

      border: 0 !important;  /*Removes border*/
      -webkit-appearance: none;  /*Removes default chrome and safari style*/
      -moz-appearance: none; /* Removes Default Firefox style*/
      background: url('dropdown_arrow.png') no-repeat;  /*Adds background-image*/
      background-position: 82px 7px;  /*Position of the background-image*/
      width: 100px; /*Width of select dropdown to give space for arrow image*/
      text-indent: 0.01px; /* Removes default arrow from firefox*/
      text-overflow: "";  /*Removes default arrow from firefox*/

      /*My custom style for fonts*/

      color: #1455a2;
}

Note (IE Fix) – Thanks to Marcos W for providing a fix for IE. To fix it just apply this to your CSS:

select::-ms-expand { display: none; }

Here’s a working demo using Codepen