Borde cromado adicional en <select> elementos usando esquinas redondeadas

Tengo un problema en Chrome donde hay "dos" bordes cuando utilizo esquinas redondeadas en un menubox seleccionado (ver a continuación, la parte superior es un cuadro de entrada y la parte inferior es la selección cuadro)Borde cromado adicional en <select> elementos usando esquinas redondeadas

Two borders

input, select { 
    border:2px solid #ced6e9; 
    -moz-border-radius:8px; 
    border-radius: 8px; 
}

he probado otros dos enfoques, pero que no funcionan:

Rounded corners in Chrome not working que no funciona y
establecer -webkit-appearance: none; pero esto elimina el pequeño botón que indica que es una caja de selección

Editar estoy usando Windows 7 (Service Pack 1) con Chrome v18

ver este jsFiddle example

Fuente

2012-04-12 J Lee

Este seguro que se siente como un insecto y parece estar relacionado con la propiedad border-width junto a la frontera- radio en el elemento seleccionado. Eliminar el ancho, está bien. Establecer tres de los cuatro lados con un ancho, está bien. Establecer las cuatro fronteras, problema. – j08691

Tuve este problema antes y todo lo que hice fue eliminar el borde de la selección y envolverlo en un div con el mismo estilo (bordes redondeados). Estoy seguro de que hay una solución más elegante, pero fue mejor que buscar horas/días para encontrar una solución.

Echa un vistazo a este fiddle.

Fuente

2012-04-12 15:26:28

No solicite a los usuarios que confíen en fuentes externas para obtener una respuesta, a menos que soliciten un enlace para algo. JSFiddle ha estado inactivo antes, podría volver a suceder; por favor edite el código en la respuesta. :) –

dado que OP usó jsfiddle en su pregunta, voy a suponer que puedo usar jsfiddle para la respuesta. –

OP utilizó un violín * además * a un ejemplo del código.Puedo editarlo si quieres :) –

propiedad conjunto contorno css a ninguno para desplegable ...

select:focus 
{ 
    outline: none; 
}

Fuente

2012-04-12 14:41:15 rt2800

no funciona; el esquema no es el problema. Hay una caja gris extra alrededor que es innecesaria. –

¿Qué versión de Windows está utilizando? A veces, el sistema operativo forzará caprichos gráficos adicionales en ciertos elementos HTML. Las cosas parecen comportarse como se desea en Chrome 18 en Windows 7 con un tema Aero habilitado. En realidad, ayer respondí una pregunta similar con un ejemplo para diseñar el elemento select para reemplazar los elementos gráficos perdidos con -webkit-appearance: none: https://stackoverflow.com/a/10074928/1030243. Con suerte, si no se encuentra otra solución, puede implementarla con unas pocas líneas adicionales de CSS.

Fuente

2012-04-12 14:56:21 Aaron

Sí, el problema extra del sistema operativo es definitivamente el problema. extraño. –

Estoy usando Windows 7 con service pack 1 –

tenga en cuenta que -webkit-appearance: ninguno eliminará la flecha y también incluye safari (ipad/iphone, etc.) –

Me lo recomendamos el uso de un acolchado en lugar de margen ... que se verá mejor

select {   
    -moz-border-radius:8px; 
    border-radius: 8px; 
    -webkit-border-radius: 5px; /*this one is more important than the moz one*/ 
    padding:9px; 
}

Fuente

2013-06-05 14:04:57 HellBaby

Borde cromado adicional en <select> elementos usando esquinas redondeadas

Respuesta

Cuestiones relacionadas