How to style <select> tag

Question

How do I style the tag select, like that arrow at the end of the field. The pseudo-classes :hover, :focus, work with this element?

Answer 1

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>

Upshot:

Example in Fiddle with Pseudo-Classes

As pseudo-classes in general they work the same for most elements and yes it works with the element .

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

:Hover - when we hover the mouse over the element.

:active - when we activate the element. For example, when we click on a link and do not release the mouse button. At this point, we are activating the action of the element. This state is also activated when we navigate the links by the keyboard 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 code structure. 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 is always the HTML tag.

:Nth-Child() - allows us to select any element in the middle of a group of elements. For example, you can select rows from a table. Thus, we can make a zebrada table, without the help of javascript. There are variations of this pseudo-class so we can take 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: http://bavotasan.com/2011/style-select-box-using-only-css/

Font Pseudo-Classes: http://tableless.com.br/pseudo-classes-css/

Answer 2

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

The best way to 'modify' this little arrow (and by itself, the rest of the element), would be to exchange it with one that you manufactured yourself. You can view it using Javascript and/or CSS.

Answer 3

There are some native browser components that have behaviors that cannot be edited via CSS.

If this is really necessary, there are Javascript plugins that exchange native components for HTML code that can be formatted.

At this link you can choose one that suits you.

Beware of these customizations, creating Javascript-dependent apps can be a shot in the foot. Always look for components that cannot be used if Javascript is disabled.

Some components also provide WAI ARIA support which are rules applied to HTML to increase the accessibility of your code. These rules, even though they are mostly treated as resources for the visually impaired, are excellent features for users to be able to use for example inside the car using the voice command or help search robots like Googlebot to correctly identify and index the type of content.

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