Rimozione degli angoli arrotondati da un elemento <select> in Chrome / Webkit

143

Il foglio di stile dell'agente utente per Chrome fornisce un raggio del bordo di 5 px a tutti gli angoli di un <select>elemento. Ho provato a sbarazzarmi di questo applicando un raggio di 0px attraverso il mio foglio di stile esterno, nonché in linea sull'elemento stesso; Ho provato entrambi border-radius:0pxe -webkit-border-radius:0px;ho provato anche il più specifico border-top-left-radius:0px(insieme al suo equivalente -webkit).

Nessuno sta funzionando.

Quando esamino l'elemento negli strumenti di sviluppo di webkit, lo stile calcolato elenca ancora il raggio come 5px. Ma se faccio clic sulla freccia di espansione accanto ad essa per vedere i dettagli, si legge: element.style - 0px. E di seguito mostra la specifica CSS esterna che ho dato di 0px, insieme alla specifica del foglio di stile user-agent di 5px. Ed entrambi questi ultimi due sono cancellati, come dovrebbero essere.

Qualche idea?

select webkit css

— maxedison
fonte

Potresti anche pubblicare il codice? Ancora meglio se lo pubblichi usando jsfiddle.net.

— ngen,

1

In realtà non ho alcun bordo-raggio come stile predefinito in Chrome 10 su Win7, forse questa è un'altra versione o sistema operativo?

— Wesley Murch,

Nessun angolo arrotondato in Chrome 12 su Windows 7.

— Andyb,

1

Avrei dovuto dire che è su Mac OS X.

— maxedison,

244

Questo funziona per me (stili la prima apparizione non l'elenco a discesa):

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

http://jsfiddle.net/fMuPt/

— antonj
fonte

179

Un modo per rimuovere gli angoli arrotondati ma mantenere le frecce sulla destra?

— Adam,

3

è necessario aggiungere le frecce, ad es. come immagine di sfondo con posizione 100% 50% e attributo senza ripetizione. Ho anche usato l'immagine codificata Base64 in CSS per evitare ulteriori richieste HTTP.

— Karl Adler,

26

@Adam Ha funzionato per me se usi border: 0e aggiungi uno schema come:outline: 1px inset black; outline-offset:-1px

— Filipe Pereira,

1

@FilipePereira Nice Mi piace, anche se dovrò aggiungere che l'offset del contorno non è supportato da IE.

— Tim

6

Questo elimina le frecce a destra, che danneggiano inaccettabilmente l'esperienza dell'utente. Invece, dai uno stile al menu a discesa background-color: #yourbge border-style: nonequindi crea un div direttamente prima del menu a discesa con position: absolutee border-bottom: 1px solid #youpicke display: inline. Frecce conservate, UX incolume, correzione migliore.

— Devigner,

90

Solo la mia soluzione con l'immagine a discesa (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;
}

Sto usando bootstrap ecco perché ho usato select.form-control
Puoi usare select{o select.your-custom-class{invece.

— Afzal Hossain
fonte

4

Questa è l'unica risposta che ha risolto il mio problema, sebbene sii consapevole di usare lo sfondo rispetto all'immagine di sfondo poiché il colore di riempimento dello svg sovrascriverà qualsiasi colore di sfondo che hai impostato per l'input.

— Lucas M,

D'accordo, vota per favore questa risposta! Non capisco gli altri voti su una risposta incompleta. Qualche consiglio per usare l'icona fontawesome invece di in linea svg?

— Nicolas Thery,

FontAwesome è una raccolta di icone ma è necessaria solo un'icona. Quindi devi estrarre una delle icone di FA usando uno strumento come icomoon.io Dopo quell'esportazione quell'icona come file svg o png e collegarla dal tuo css

— Afzal Hossain,

Bella soluzione, ma nella mia situazione ho aggiunto il colore di sfondo: bianco;

— Viktor Bogutskii,

Si noti tuttavia, quando si imposta width: auto;, la freccia svg aggiunta si sovrappone al contenuto della selezione. Ciò richiede un'imbottitura aggiuntiva sul lato destro di 16px. Questa imbottitura è tuttavia visibile su tutti i browser, interrompendo il design su altri browser. Non ho ancora una soluzione per questo ...

— Klaas van der Weij,

31

Se vuoi i bordi quadrati e vuoi ancora la piccola freccia di espansione, ti consiglio questo:

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

— jordan314
fonte

2

Il problema di questo è che si ignorare l'impostazione predefinita outlinesu :focus. Se hai intenzione di usare questa risposta, dovresti cambiare il tuo select:focusstile per mostrare visivamente che l' selectelemento diventa attivo, o :focused, al clic.

— Devin McInnis,

@ jordan314 Guarda gli angoli arrotondati in questa immagine . Raggio del bordo: 0; non ha alcun effetto sul tag select. Almeno su Chrome OSX comunque.

— Jammer,

1

@ 7immy è strano, sono anche su Chrome OS X ed ecco uno screenshot del violino sopra imgur.com/r6ce6Yv

— jordan314

1

@ jordan314 Che ne dici di questo? jsfiddle.net/78xa6qud/2 . Immagino che possiamo cavarcela se lo sfondo della selezione e lo sfondo dietro sono dello stesso colore.

— Jammer,

@ 7immy ah sì, immagino sia un avvertimento.

— jordan314,

7

Alcune buone soluzioni qui, ma questa non ha bisogno di SVG, conserva il bordo outlinee lo mette a filo sul pulsante.

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>

Espandi frammento

— aleemb
fonte

6

Mentre la risposta in alto rimuove il bordo, rimuove anche la freccia che rende estremamente difficile se non impossibile per l'utente identificare l'elemento come una selezione.

La mia soluzione era quella di attaccare un div bianco (con bordo-raggio: 0px) dietro la selezione. Imposta la sua posizione su assoluta, la sua altezza all'altezza della selezione e dovresti essere a posto!

— Reed Martin
fonte

4

Soluzione con freccia a discesa personalizzata a destra, utilizza solo CSS (nessuna immagine)

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>

Espandi frammento

— Mihai Crăiță
fonte

Il posizionamento in background che ha funzionato meglio per le mie esigenze è stato: background-position: calc(100% - 4px) center, 100% center;questo sposta la freccia al centro della selezione e completamente a destra. Grazie mille per l'ottimo inizio!

— Brandon,

3

Un modo per mantenerlo semplice ed evitare di fare confusione con le frecce e altre caratteristiche simili è semplicemente ospitarlo in un div con lo stesso colore di sfondo del tag select.

— Danny Santos
fonte

1

Sono d'accordo, questa è di gran lunga la soluzione più semplice, affidabile e portatile.

— John Henckel,

1

L'eliminazione delle frecce dovrebbe essere evitata. Una soluzione che preserva le frecce del menu a discesa è innanzitutto rimuovere gli stili dal menu a discesa:

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

Quindi crea div direttamente prima del menu a discesa nel tuo HTML:

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

E disegna il div in questo modo:

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

La visualizzazione in linea impedirà al div di passare a una nuova riga, la posizione assoluta lo rimuove dal flusso della pagina. Il risultato finale è una bella sottolineatura chiara che puoi modellare come desideri e il tuo menu a discesa si comporta ancora come l'utente si aspetterebbe.

— devigner
fonte

1

Inset box-shadow fa il trucco.

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

dimostrazione

— Marco Allori
fonte

0

Per qualche motivo è effettivamente influenzato dal colore del bordo ??? Quando si utilizza il colore standard, gli angoli rimangono arrotondati, ma se si cambia il colore anche leggermente, l'arrotondamento scompare.

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

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

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

— mcallahan
fonte

Hmm non sono sicuro di OSX. Ho appena provato di nuovo su Windows (versione Chrome 45.0) e funziona ancora. Immagino che il problema sia ancora più strano, è specifico per la piattaforma ...

— Mcallahan,

Questo perché l'impostazione del bordo fa sì che il browser visualizzi la casella combinata stessa, anziché utilizzare quella sottostante fornita dal sistema operativo.

— Kong,

0

bene ho ottenuto la soluzione. spero che ti possa aiutare :)

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>

Espandi frammento

— Amit
fonte

0

Di seguito è il modo di farlo;

Crea un'immagine di sfondo simile a un menu a discesa.
Disattiva l'aspetto del browser
Allinea l'immagine di sfondo sul componente selezionato

  .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

Ho usato la soluzione di jordan314, ma poi ho aggiunto la classe "border-light" per selezionare. Se hai definito la classe border-light di default in css, puoi usarla direttamente. Definisce semplicemente il bordo come bianco). Ho cambiato il bordo per quadrare / rimuovere il raggio e ho mantenuto la freccia.

Ecco cosa ho fatto:

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

se non hai il bordo-luce predefinito, aggiungi il tuo 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

La domanda su Chrome / Webkit.

— zishe

-10

Imposta CSS come

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

Prova se funziona.

— AbhiRoczz ...
fonte