Como estilizar a <option> apenas com CSS?

Nota: Esta questão não é sobre como fazer um menu suspenso personalizado. É apenas sobre possibilidades de <option>elementos de estilo dentro do elemento selecionado em CSS

Como posso estilizar <option>um <select>elemento com compatibilidade entre navegadores? Eu conheço muitas formas de JavaScript que personalizam o menu suspenso para conversão <li>, sobre as quais não estou perguntando.

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

Estou perguntando o que seria possível apenas com CSS, com compatibilidade para IE9 +, Firefox e Chrome.

Eu quero estilizar assim ou o mais próximo possível.

Tentei aqui http://jsfiddle.net/jitendravyas/juwz3/3/ , mas o Chrome não mostra nenhum estilo, exceto a cor da fonte, enquanto o Firefox mostra um pouco mais. Como fazer com que a borda e o preenchimento também funcionem no Chrome?

EDITAR 2015 maio

Exoneração de responsabilidade: peguei o snippet do link de resposta abaixo:

Atualização Importante!

Além do WebKit, a partir do Firefox 35 poderemos usar a appearancepropriedade:

Usando -moz-appearancecom o nonevalor em uma caixa de combinação agora remova o botão suspenso

Portanto, agora, para ocultar o estilo padrão, é tão fácil quanto adicionar as seguintes regras em nosso elemento de seleção:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

Para suporte ao IE 11, você pode usar [ ::-ms-expand] [15].

select::-ms-expand { /* for IE 11 */
    display: none;
}

Resposta Antiga

Infelizmente, o que você pergunta não é possível usando CSS puro. No entanto, aqui está algo semelhante que você pode escolher como uma solução alternativa. Verifique o código ao vivo abaixo.

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }

<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

EDITAR

Aqui está a pergunta que você fez há algum tempo. Como estilizar uma lista suspensa <select> com CSS apenas sem JavaScript? Como diz lá, apenas no Chrome e até certo ponto no Firefox você pode conseguir o que deseja. Caso contrário, infelizmente, não existe uma solução CSS pura para cross-browser para estilizar um select.

Não existe uma maneira cruzada de navegadores de estilizar elementos de opção, certamente não na extensão de sua segunda captura de tela. Você pode conseguir colocá-los em negrito e definir o tamanho da fonte, mas isso é tudo ...

Já brinquei com itens selecionados antes e sem substituir a funcionalidade com JavaScript, não acho que seja possível no Chrome. Quer você use um plug-in ou escreva seu próprio código, o CSS só é proibido para o Chrome / Safari e, como você disse, o Firefox é melhor em lidar com isso.