Try this:

<style>
    .select-estiloso { /* <div> */
       width: 240px;
       height: 34px;
       overflow: hidden;
       background: url(nova_setinha.jpg) no-repeat right #ddd; /* novo ícone para o <select> */
       border: 1px solid #ccc;
    }   

    .select-estiloso select { /* <select> */
       background: transparent; /* importante para exibir o novo ícone */
       width: 268px;
       padding: 5px;
       font-size: 16px;
       line-height: 1;
       border: 0;
       border-radius: 0;
       height: 34px;
       -webkit-appearance: none;
    }      
</style>

<div class="select-estiloso">
   <select>
      <option>Aqui a primeira opção</option>
      <option>E aqui a segunda opção</option>
   </select>
</div>

Result:

Example in Fiddle with Pseudo-Classes

pseudo-classes generally work the same for most elements, but works with the element.

  

Dynamic Pseudo-classes control the states of the elements. Below,   some of them go:

     

    

: hover - when we hover over the element.

         

: active - when we activate the element. For example, when we click on a link and do not release the mouse button. We are now activating the element's action. This state is also enabled when navigating through keyboard links using the TAB. This state does not exist in all elements.

         

: visited - when the link is visited.

         

: focus - when an element receives focus. Widely used in text fields. When we click on a text field to write, the     element is gaining focus.

  

     

Structural Pseudo-classes serve to select an element of the   structure of the code. There are several, for example:

     

    

: first-child - selects the first child of another element.

         

: last-child - selects the last child of an element.

         

: root - represents an element that is the root of the document. In HTML 4, it's always the HTML tag.

         

: nth-child () - allows you to select any element in the middle of a group of elements. For example, you can select rows from a table. So we can make a zebrada table without the help of javascript. There are variations of this pseudo-class so we can get the elements from the bottom up: nth-last-child, and so on.

         

: lang () - selects elements that have the lang attribute with a specific value.

  

CSS Select Font: link

Source Pseudo-Classes: link

The <select> tag is not included in the elements available for styling. In this case, the pseudo-classes :hover , :focus , etc. also will not work.

The best way to 'modify' this little thing (and for itself, the rest of the element) would be to change it with one that you made yourself. Therefore, you can view it through JavaScript and / or CSS.

Some native browser components have behaviors that can not be edited via CSS.

If this is really necessary, there are Javascript plugins that switch native components to HTML tags that can be formatted.

In this link you can choose one that suits you.

Beware of these customizations, creating Javascript-dependent applications can be a shot in the foot. Always look for components that do not disable the use if Javascript is disabled.

Some components also support WAI ARIA, which are rules applied to HTML to increase the accessibility of your code. Although these rules are most often treated as visually impaired features, they are excellent resources for users to use for example in the car using voice commands or help search thefts like GoogleBot to correctly identify and index the type content.

Another thing to keep in mind is the support for mobile, some of these components are not usual on mobile devices. To counter this problem, you can choose to choose components for CSS frameworks, such as Twitter Bootstrap or Fundation, or even jQuery Mobile.