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

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

Respostas: