Removendo cantos arredondados de um elemento <select> no Chrome / Webkit

A folha de estilo do agente do usuário do Chrome fornece um raio de borda de 5px para todos os cantos de um <select>elemento. Tentei me livrar disso aplicando um raio de 0px na minha folha de estilo externa, bem como no elemento em si; Eu tentei os dois border-radius:0pxe -webkit-border-radius:0px;tentei o ainda mais específico border-top-left-radius:0px(junto com o equivalente ao -webkit).

Nenhum está funcionando.

Quando eu examino o elemento nas ferramentas de desenvolvedor do webkit, o Estilo computado ainda lista o raio como 5px. Mas se eu clicar na seta do expansor ao lado para ver os detalhes, ele lê: element.style - 0px. E abaixo disso, ele mostra a especificação css externa que forneci de 0px, juntamente com a especificação de folha de estilo de agente do usuário de 5px. E os dois últimos são riscados, como deveriam ser.

Alguma ideia?

Isso funciona para mim (estiliza a primeira aparição, não a lista suspensa):

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}

http://jsfiddle.net/fMuPt/

Apenas minha solução com imagem suspensa (inline svg)

select.form-control {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

Estou usando o bootstrap e foi por isso que usei select.form-control
Você pode usar select{ou select.your-custom-class{preferir.

Se você deseja bordas quadradas e ainda deseja a pequena seta expansora, recomendo:

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}

Algumas boas soluções aqui, mas esta não precisa de SVG, preserva a borda outlinee a alinha no botão.

select {
  height: 20px;
  -webkit-border-radius: 0;
  border: 0;
  outline: 1px solid #ccc;
  outline-offset: -1px;
}

<select>
 <option>Apple</option>
 <option>Ball</option>
 <option>Cat</option>
</select>

Enquanto a resposta superior remove a borda, também remove a seta, o que torna extremamente difícil, se não impossível, para o usuário identificar o elemento como uma seleção.

Minha solução foi colocar apenas uma div branca (com raio da borda: 0px) atrás da seleção. Defina sua posição para absoluta, sua altura para a altura do select e você deve estar pronto!

Solução com seta suspensa à direita personalizada, usa apenas css (sem imagens)

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;

  -moz-appearance: none;
  display: block;
  padding: 0.3rem;
  height: 2rem;
  width: 100%;
}

<html>

<body>
  <br/>
  <h4>Example</h4>
  <select>
    <option></option>
    <option>Hello</option>
    <option>World</option>
  </select>
</body>

</html>

Uma maneira de simplificar e evitar mexer com as setas e outros recursos é abrigá-lo em uma div com a mesma cor de fundo da tag de seleção.

A eliminação das setas deve ser evitada. Uma solução que preserva as setas suspensas é primeiro remover os estilos da lista suspensa:

.myDropdown {
  background-color: #yourbg;
  border-style: none;
}

Em seguida, crie div diretamente antes da lista suspensa no seu HTML:

<div class="myDiv"></div>
<select class="myDropdown...">...</select>

E estilize a div assim:

.myDiv {
  background-color: #yourbg;
  border-style: none;
  position: absolute;
  display: inline;
  border: 1px solid #acolor;
}

A exibição em linha impedirá que o div vá para uma nova linha, a posição absoluta o remove do fluxo da página. O resultado final é um sublinhado limpo e agradável que você pode estilizar como quiser e seu menu suspenso ainda se comporta como o usuário esperaria.

Inserir caixa-sombra faz o truque.

select{
  -webkit-appearance: none;
  box-shadow: inset 0px 0px 0px 4px;
  border-radius: 0px;
  border: none;
  padding:20px 150px 20px 10px;
}

Demo

Por alguma razão, é realmente afetado pela cor da borda ??? Quando você usa a cor padrão, os cantos permanecem arredondados, mas se você alterar a cor mesmo que ligeiramente, o arredondamento desaparece.

select.regularcolor {
    border-color: rgb(169, 169, 169);
}

select.offcolor {
    border-color: rgb(170, 170, 170);
}

https://jsfiddle.net/hLg70o70/2/

Bem, eu tenho a solução. espero que possa ajudá-lo :)

select{
      border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch;
      width: 120px;
      height: 36px;
      color: #999;
  }

<select>
  <option value="1">Hi</option>
  <option value="2">Bye</option>
</select>

A seguir está o caminho para fazê-lo;

1. Crie uma imagem de plano de fundo parecida com uma lista suspensa.
2. Desativar a aparência do navegador
3. Alinhar a imagem de plano de fundo no componente selecionado

  .control select {  
    border-radius: 0px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("<your image>");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 20px;
  }

Usei a solução de jordan314, mas adicionei a classe "border-light" para selecionar. Se você tiver a classe border-light padrão definida em css, poderá usá-la diretamente. Apenas define a borda como branca). Mudei a borda para quadrado / remova o raio e mantive a seta.

Aqui está o que eu fiz:

<select class="form-control border border-light" id="type">
   <option>Select</option>
   <option value="mobile">Apple</option>
 </select>

se você não tiver a luz de borda predefinida, basta adicionar seu css:

<style>
.border-light{
         border-color:#f8f9fa!important
     }

 #type {
   border:0;
   outline:1px solid #ddd;
   background-color:white;
 }
</style>

firefox: 18

.squaredcorners {
    -moz-appearance: none;
}

Defina o CSS como

border-radius:0px !important
-webkit-border-radius:0px !important
border-top-left-radius:0px !important

Tente se funcionar.