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

143

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?

select webkit css

— maxedison
fonte

Você também pode postar o código? Ainda melhor se você publicá-lo usando jsfiddle.net.

— N15

1

Na verdade, eu não tenho nenhum raio de borda como estilo padrão no Chrome 10 no Win7, talvez essa seja outra versão ou sistema operacional?

— Wesley Murch

Também não há cantos arredondados no Chrome 12 no Windows 7.

— andyb

1

Deveria ter mencionado que é no Mac OS X.

— maxedison

244

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/

— antonj
fonte

179

Alguma maneira de remover os cantos arredondados, mas mantenha as setas à direita?

— Adam

3

você precisa adicionar as setas, por exemplo, como imagem de fundo com a posição 100% 50% e atributo sem repetição. Também usei a imagem codificada em base64 em css para evitar solicitações http adicionais.

— 31814 Karl Adler

26

@Adam Funcionou para mim se você usar border: 0e adicionar um esboço como:outline: 1px inset black; outline-offset:-1px

— Filipe Pereira

1

@FilipePereira Nice Eu gosto, embora eu tenha que acrescentar que o offset de contorno não é suportado pelo IE.

— Tim

6

Isso elimina as setas à direita, o que inaceitavelmente prejudica a experiência do usuário. Em vez disso, estilize a lista suspensa background-color: #yourbge border-style: nonecrie uma div diretamente antes da lista suspensa com position: absolutee border-bottom: 1px solid #youpicke display: inline. Setas preservadas, UX intacta, melhor correção.

— devigner

90

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.

— Afzal Hossain
fonte

4

Esta é a única resposta que resolveu meu problema, embora tenha em mente o uso de background vs background-image, pois a cor de preenchimento do svg substituirá qualquer cor de fundo que você definiu para sua entrada.

— Lucas M

Concordou, vote esta resposta! Não entendo os outros votos em uma resposta incompleta. Algum conselho para usar o ícone fontawesome em vez do svg embutido?

— Nicolas Thery

FontAwesome é uma coleção de ícones, mas você precisa de apenas um ícone. Então, você precisa extrair um dos ícones FA usando alguma ferramenta como icomoon.io Depois que a exportação nesse ícone, como ficheiros SVG ou png e vinculá-lo a partir de seu css

— Afzal Hossain

Ótima solução, mas na minha situação eu adicionei a cor de fundo: branco;

— Viktor Bogutskii

Observe, no entanto, quando você define width: auto;, a seta svg adicionada sobrepõe o conteúdo da seleção. Isso requer um preenchimento adicional no lado direito de 16px. No entanto, esse preenchimento é visível em todos os navegadores, quebrando o design em outros navegadores. Eu não tenho nenhuma solução para isso ainda ...

— Klaas van der Weij

31

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

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

— jordan314
fonte

2

O problema com isso é que você vai substituir o padrão outlineon :focus. Se você estiver indo para usar esta resposta, você deve mudar seu select:focusestilo para mostrar visualmente que o selectelemento é torna-se ativa, ou :focused, no clique.

— Devin McInnis

@ jordan314 Confira os cantos arredondados nesta foto . Raio da borda: 0; não tem efeito na tag de seleção. Pelo menos no Chrome OSX de qualquer maneira.

— Jammer

1

@ 7immy que é estranho, eu também estou no Chrome OS X e aqui está uma imagem do acima fiddle imgur.com/r6ce6Yv

— jordan314

1

@ jordan314 Que tal isso? jsfiddle.net/78xa6qud/2 . Acho que podemos sair impunes se o plano de fundo e o plano de fundo do select forem da mesma cor.

— Jammer

@ 7immy ah sim, acho que é uma ressalva.

— Jordan314 #

7

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>

Expandir snippet

— aleemb
fonte

6

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!

— Reed Martin
fonte

4

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>

Expandir snippet

— Mihai Crăiță
fonte

O posicionamento em segundo plano que funcionou melhor para minhas necessidades foi: background-position: calc(100% - 4px) center, 100% center;Isso move a seta para o meio do select e para a direita. Muito obrigado pelo ótimo começo!

— Brandon

3

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.

— Danny Santos
fonte

1

Concordo que esta é de longe a solução mais simples, confiável e portátil.

— John Henckel

1

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.

— devigner
fonte

1

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

— Marco Allori
fonte

0

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/

— mcallahan
fonte

Hmm, não tenho certeza sobre o OSX. Apenas tentei novamente no Windows (Chrome Versão 45.0) e ainda funciona. Eu acho que para tornar a questão ainda mais estranho que de plataforma específica ...

— mcallahan

Isso ocorre porque a configuração da borda faz com que o navegador renderize a própria caixa de combinação, em vez de usar a subjacente fornecida pelo sistema operacional.

— Kong

0

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>

Expandir snippet

— Amit
fonte

0

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

Crie uma imagem de plano de fundo parecida com uma lista suspensa.
Desativar a aparência do navegador
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;
  }

— Jerome Anthony
fonte

-1

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>

— Sitti Munirah Abdul Razak
fonte

-8

firefox: 18

.squaredcorners {
    -moz-appearance: none;
}

— david forstner
fonte

A pergunta sobre o Chrome / Webkit.

— Zishe 5/07

-10

Defina o CSS como

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

Tente se funcionar.

— AbhiRoczz ...
fonte