Eliminar esquinas redondeadas de un elemento <select> en Chrome / Webkit

143

La hoja de estilo de agente de usuario para Chrome proporciona un radio de borde de 5 píxeles a todas las esquinas de un <select>elemento. Intenté deshacerme de esto aplicando un radio de 0px a través de mi hoja de estilo externa, así como en línea en el elemento mismo; He intentado ambos border-radius:0pxy -webkit-border-radius:0px;he probado el aún más específico border-top-left-radius:0px(junto con su equivalente en web-kit).

Ninguno está trabajando

Cuando examino el elemento en las herramientas de desarrollo de webkit, el Estilo Computado todavía enumera el radio como 5px. Pero si hago clic en la flecha del expansor al lado para ver los detalles, se lee: element.style - 0px. Y debajo de eso, muestra la especificación css externa que di de 0px, junto con la especificación de hoja de estilo de agente de usuario de 5px. Y los dos últimos están tachados, como deberían ser.

¿Algunas ideas?

select webkit css

— maxedison
fuente

¿Podrías también publicar el código? Aún mejor si lo publicas usando jsfiddle.net.

— ngen

1

En realidad, no tengo ningún radio de borde como estilo predeterminado en Chrome 10 en Win7, ¿tal vez esta es otra versión o sistema operativo?

— Wesley Murch

Tampoco hay esquinas redondeadas en Chrome 12 en Windows 7.

— andyb

1

Debería haber mencionado que está en Mac OS X.

— maxedison

244

Esto funciona para mí (el estilo de la primera aparición no es la lista desplegable):

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

http://jsfiddle.net/fMuPt/

— antonj
fuente

179

¿Alguna forma de eliminar las esquinas redondeadas pero manteniendo las flechas a la derecha?

— Adam

3

necesita agregar las flechas, por ejemplo, como imagen de fondo con posición 100% 50% y atributo de no repetición. También utilicé una imagen codificada en base64 en css para evitar solicitudes http adicionales.

— Karl Adler

26

@ Adam Funcionó para mí si usa border: 0y agrega un esquema como:outline: 1px inset black; outline-offset:-1px

— Filipe Pereira

1

@FilipePereira Nice Me gusta, aunque tendré que añadir que el desplazamiento de esquema no es compatible con IE.

— Tim

66

Esto elimina las flechas a la derecha, lo que daña inaceptablemente la experiencia del usuario. En su lugar, diseñe el menú desplegable background-color: #yourbgy border-style: noneluego cree un div directamente antes del menú desplegable con position: absolutey border-bottom: 1px solid #youpicky display: inline. Flechas preservadas, UX ileso, mejor solución.

— Devigner

90

Solo mi solución con la imagen desplegable (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;
}

Estoy usando bootstrap por eso lo usé select.form-control
Puedes usar select{o en su select.your-custom-class{lugar.

— Afzal Hossain
fuente

44

Esta es la única respuesta que resolvió mi problema, aunque tenga en cuenta el uso de background vs background-image ya que el color de relleno del svg sobrescribirá cualquier color de fondo que haya establecido para su entrada.

— Lucas M

De acuerdo, ¡vote por favor esta respuesta! No entiendo los otros votos en una respuesta incompleta. ¿Algún consejo para usar el icono fontawesome en lugar de svg en línea?

— Nicolas Thery

FontAwesome es una colección de iconos, pero solo necesita un icono. Por lo tanto, debe extraer uno de los íconos de FA utilizando alguna herramienta como icomoon.io Después de eso, exporte ese ícono como un archivo svg o png y vincúlelo desde su CSS

— Afzal Hossain

Buena solución, pero en mi situación agregué color de fondo: blanco;

— Viktor Bogutskii

Sin embargo, tenga en cuenta que cuando configura width: auto;, la flecha svg agregada superpone el contenido de la selección. Esto requiere un relleno adicional en el lado derecho de 16px. Sin embargo, este relleno es visible en todos los navegadores, rompiendo el diseño en otros navegadores. Todavía no tengo solución para eso ...

— Klaas van der Weij

31

Si desea bordes cuadrados y aún quiere la pequeña flecha expansora, le recomiendo esto:

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

— jordan314
fuente

2

El problema con esto es que anulará el valor predeterminado outlineen :focus. Si va a usar esta respuesta, debe cambiar su select:focusestilo para mostrar visualmente que el selectelemento se activa o :focusedita al hacer clic.

— Devin McInnis

@ jordan314 Echa un vistazo a las esquinas redondeadas en esta foto . Radio de borde: 0; no tiene efecto en la etiqueta de selección. Al menos en Chrome OSX de todos modos.

— Jammer

1

@ 7immy eso es extraño, también estoy en Chrome OS X y aquí hay una captura de pantalla del violín anterior imgur.com/r6ce6Yv

— jordan314

1

@ jordan314 ¿Qué tal esto? jsfiddle.net/78xa6qud/2 . Supongo que podemos salir adelante si el fondo de la selección y el fondo detrás del mismo son del mismo color.

— Jammer

@ 7immy ah sí, supongo que es una advertencia.

— jordan314

7

Algunas buenas soluciones aquí, pero esta no necesita SVG, conserva el borde a través outliney lo coloca al ras del botón.

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 fragmento

— aleemb
fuente

6

Si bien la respuesta superior elimina el borde, también elimina la flecha, lo que hace que sea extremadamente difícil, si no imposible, que el usuario identifique el elemento como una selección.

Mi solución fue simplemente pegar un div blanco (con radio de borde: 0px) detrás de la selección. Establezca su posición en absoluta, su altura a la altura de la selección, ¡y debería estar listo!

— Reed Martin
fuente

4

Solución con flecha desplegable derecha personalizada, utiliza solo CSS (sin imágenes)

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 fragmento

— Mihai Crăiță
fuente

El posicionamiento de fondo que funcionó mejor para mis necesidades fue: background-position: calc(100% - 4px) center, 100% center;Esto mueve la flecha hacia el centro de la selección y todo el camino hacia la derecha. Muchas gracias por el gran comienzo!

— Brandon

3

Una forma de simplificarlo y evitar jugar con las flechas y otras características similares es alojarlo en un div con el mismo color de fondo que la etiqueta de selección.

— Danny Santos
fuente

1

Estoy de acuerdo, esta es, con mucho, la solución más simple, confiable y portátil.

— John Henckel

1

Se debe evitar eliminar las flechas. Una solución que conserva las flechas desplegables es eliminar primero los estilos del menú desplegable:

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

Luego crea div directamente antes del menú desplegable en tu HTML:

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

Y dale estilo al div así:

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

La visualización en línea evitará que el div vaya a una nueva línea, la posición absoluta lo elimina del flujo de la página. El resultado final es un subrayado limpio y agradable que puede diseñar como desee, y su menú desplegable aún se comporta como el usuario esperaría.

— devoto
fuente

1

El recuadro-sombra insertado hace el truco.

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

Manifestación

— Marco Allori
fuente

0

¿Por alguna razón en realidad está afectado por el color del borde? Cuando usa el color estándar, las esquinas permanecen redondeadas, pero si cambia el color aunque sea ligeramente, el redondeo desaparece.

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

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

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

— mcallahan
fuente

Hmm no estoy seguro acerca de OSX. Solo lo intenté nuevamente en Windows (Chrome Versión 45.0) y aún funciona. Supongo que para hacer el problema aún más extraño, es específico de la plataforma ...

— mcallahan

Esto se debe a que la configuración del borde hace que el navegador muestre el cuadro combinado en sí, en lugar de utilizar el subyacente proporcionado por el sistema operativo.

— Kong

0

Bueno, tengo la solución. espero que te pueda ayudar :)

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 fragmento

— Amit
fuente

0

Lo siguiente es la forma de hacerlo;

Cree una imagen de fondo que parezca un menú desplegable.
Desactivar la apariencia del navegador
Alinee la imagen de fondo en el componente seleccionado.

  .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
fuente

-1

Utilicé la solución de jordan314, pero luego agregué la clase "border-light" para seleccionar. Si tiene una clase de luz de borde predeterminada definida en css, puede usarla directamente. Simplemente define el borde como blanco). Cambié el borde a cuadrado / eliminé el radio y mantuve la flecha.

Aquí esta lo que hice:

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

Si no tiene la luz de borde predefinida, simplemente agregue su CSS:

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

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

— Sitti Munirah Abdul Razak
fuente

-8

firefox: 18

.squaredcorners {
    -moz-appearance: none;
}

— david forstner
fuente

La pregunta sobre Chrome / Webkit.

— zishe

-10

Establecer el CSS como

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

Intenta si funciona.

— AbhiRoczz ...
fuente