css - tabla - Eliminar las esquinas redondeadas de un elemento<select> en Chrome/Webkit

html tabla bordes redondeados css

Question

La hoja de estilo de usuario-agente para Chrome proporciona un radio de 5px en todas las esquinas de un elemento <select> . He intentado 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:0px y -webkit-border-radius:0px; y probé el border-top-left-radius:0px aún más específico border-top-left-radius:0px (junto con su equivalente en -webkit).

Ninguno está funcionando.

Cuando examino el elemento en las herramientas de desarrollador de webkit, el Estilo Computado aún muestra 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 hojas de estilo de agente de usuario de 5px. Y los dos últimos están tachados, como deberían ser.

¿Algunas ideas?

Answer 1

Aquí hay algunas buenas soluciones, pero esta no necesita SVG, conserva el borde a través del outline y lo configura 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>

Answer 2

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>

Answer 3

Establecer el CSS como

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

Prueba si funciona.

Answer 4

Esto funciona para mí (estilos la primera aparición, no la lista desplegable):

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

http://jsfiddle.net/fMuPt/

Answer 5

Firefox: 18

.squaredcorners {
    -moz-appearance: none;
}

Answer 6

Mientras que 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 colocar 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 para continuar!

Answer 7

Por alguna razón, ¿está realmente afectado por el color del borde? Cuando utiliza el color estándar, las esquinas permanecen redondeadas, pero si cambia el color incluso 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/

Answer 8

Recuadro de cuadro de sombra hace el truco.

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

Demo

Answer 9

Se debe evitar eliminar las flechas. Una solución que conserva las flechas desplegables es primero eliminar 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 a la div como esta:

.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 buen subrayado limpio que puede diseñar como desee, y su menú desplegable sigue comportándose como el usuario esperaría.

Answer 10

Si desea bordes cuadrados y aún desea la pequeña flecha de expansión, recomiendo esto:

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

Answer 11

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=''#444'' 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;
}

Alternativa (ya que la anterior no está funcionando con el último Firefox)

select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("https://image.flaticon.com/icons/svg/60/60781.svg");
    background-position: 99% 50%;
    background-repeat: no-repeat;
    background-size: 16px;
}

Estoy usando bootstrap, es por eso que utilicé select.form-control
Puede usar select{ o select.your-custom-class{ lugar.

Answer 12

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