frontera SELECT en Chrome hace 3D

Question

Esto parece muy simple, pero no puedo resolverlo.

Tengo un simple menú como éste abajo ...

<select> 
    <option value="1">Option 1</option> 
</select> 

... y quiero aplicar un borde plano (ningún efecto 3D), así que estoy usando:

select { 
    border:1px solid #CCC;     
} 

Ver muestra viva aquí: http://jsfiddle.net/GqGr3/

funciona bien en Firefox e IE:

Firefox http://www.re-moto.com/usuario/select-1.png

pero rinde 3D en Chrome:

Chrome http://www.re-moto.com/usuario/select-2.png

Eso es como funciona en mi ordenador. Lo probé en una segunda computadora y se muestra bien. Si esto me sucede a mí, también le sucede a otros usuarios.

no tengo ningún extensiones instaladas en Chrome y el navegador está actualizado (18.0.1025.151 m), en Windows 7.

Estos son los estilos calculados de la muestra (incluida heredada), I no veo nada extraño:

-webkit-animation-delay: 0s; 
-webkit-animation-direction: normal; 
-webkit-animation-duration: 0s; 
-webkit-animation-fill-mode: none; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-name: none; 
-webkit-animation-play-state: running; 
-webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); 
-webkit-appearance: menulist-button; 
-webkit-backface-visibility: visible; 
-webkit-background-clip: border-box; 
-webkit-background-composite: source-over; 
-webkit-background-origin: padding-box; 
-webkit-background-size: auto; 
-webkit-border-fit: border; 
-webkit-border-horizontal-spacing: 0px; 
-webkit-border-image: none; 
-webkit-border-vertical-spacing: 0px; 
-webkit-box-align: center; 
-webkit-box-direction: normal; 
-webkit-box-flex: 0; 
-webkit-box-flex-group: 1; 
-webkit-box-lines: single; 
-webkit-box-ordinal-group: 1; 
-webkit-box-orient: horizontal; 
-webkit-box-pack: start; 
-webkit-box-reflect: none; 
-webkit-box-shadow: none; 
-webkit-color-correction: default; 
-webkit-column-axis: auto; 
-webkit-column-break-after: auto; 
-webkit-column-break-before: auto; 
-webkit-column-break-inside: auto; 
-webkit-column-count: auto; 
-webkit-column-gap: normal; 
-webkit-column-rule-color: rgb(0, 0, 0); 
-webkit-column-rule-style: none; 
-webkit-column-rule-width: 0px; 
-webkit-column-span: 1; 
-webkit-column-width: auto; 
-webkit-flex-align: stretch; 
-webkit-flex-direction: row; 
-webkit-flex-flow: row nowrap; 
-webkit-flex-item-align: auto; 
-webkit-flex-order: 0; 
-webkit-flex-pack: start; 
-webkit-flex-wrap: nowrap; 
-webkit-flow-from: none; 
-webkit-flow-into: auto; 
-webkit-font-kerning: auto; 
-webkit-font-smoothing: auto; 
-webkit-font-variant-ligatures: normal; 
-webkit-highlight: none; 
-webkit-hyphenate-character: auto; 
-webkit-hyphenate-limit-after: auto; 
-webkit-hyphenate-limit-before: auto; 
-webkit-hyphenate-limit-lines: no-limit; 
-webkit-hyphens: manual; 
-webkit-line-box-contain: block inline replaced; 
-webkit-line-break: normal; 
-webkit-line-clamp: none; 
-webkit-line-grid: none; 
-webkit-line-grid-snap: none; 
-webkit-locale: auto; 
-webkit-margin-after-collapse: collapse; 
-webkit-margin-before-collapse: collapse; 
-webkit-marquee-direction: auto; 
-webkit-marquee-increment: 6px; 
-webkit-marquee-repetition: infinite; 
-webkit-marquee-style: scroll; 
-webkit-mask-attachment: scroll; 
-webkit-mask-box-image: none; 
-webkit-mask-box-image-outset: 0px; 
-webkit-mask-box-image-repeat: stretch; 
-webkit-mask-box-image-slice: 0 fill; 
-webkit-mask-box-image-source: none; 
-webkit-mask-box-image-width: auto; 
-webkit-mask-clip: border-box; 
-webkit-mask-composite: source-over; 
-webkit-mask-image: none; 
-webkit-mask-origin: border-box; 
-webkit-mask-position: 0% 0%; 
-webkit-mask-repeat: repeat; 
-webkit-mask-size: auto; 
-webkit-nbsp-mode: normal; 
-webkit-perspective: none; 
-webkit-perspective-origin: 37px 10px; 
-webkit-print-color-adjust: economy; 
-webkit-region-break-after: auto; 
-webkit-region-break-before: auto; 
-webkit-region-break-inside: auto; 
-webkit-region-overflow: auto; 
-webkit-rtl-ordering: logical; 
-webkit-svg-shadow: none; 
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.199219); 
-webkit-text-combine: none; 
-webkit-text-decorations-in-effect: none; 
-webkit-text-emphasis-color: black; 
-webkit-text-emphasis-position: over; 
-webkit-text-emphasis-style: none; 
-webkit-text-fill-color: rgb(0, 0, 0); 
-webkit-text-orientation: vertical-right; 
-webkit-text-security: none; 
-webkit-text-stroke-color: rgb(0, 0, 0); 
-webkit-text-stroke-width: 0px; 
-webkit-transform: none; 
-webkit-transform-origin: 37px 10px; 
-webkit-transform-style: flat; 
-webkit-transition-delay: 0s; 
-webkit-transition-duration: 0s; 
-webkit-transition-property: all; 
-webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); 
-webkit-user-drag: auto; 
-webkit-user-modify: read-only; 
-webkit-user-select: text; 
-webkit-wrap-flow: auto; 
-webkit-wrap-margin: 0px; 
-webkit-wrap-padding: 0px; 
-webkit-wrap-through: wrap; 
-webkit-writing-mode: horizontal-tb; 
alignment-baseline: auto; 
background-attachment: scroll; 
background-clip: border-box; 
background-color: white; 
background-image: none; 
background-origin: padding-box; 
background-position: 0% 0%; 
background-repeat: repeat; 
background-size: auto; 
baseline-shift: baseline; 
border-bottom-color: #CCC; 
border-bottom-left-radius: 0px; 
border-bottom-right-radius: 0px; 
border-bottom-style: solid; 
border-bottom-width: 1px; 
border-collapse: separate; 
border-image-outset: 0px; 
border-image-repeat: stretch; 
border-image-slice: 100%; 
border-image-source: none; 
border-image-width: 1; 
border-left-color: #CCC; 
border-left-style: solid; 
border-left-width: 1px; 
border-right-color: #CCC; 
border-right-style: solid; 
border-right-width: 1px; 
border-top-color: #CCC; 
border-top-left-radius: 0px; 
border-top-right-radius: 0px; 
border-top-style: solid; 
border-top-width: 1px; 
bottom: auto; 
box-shadow: none; 
box-sizing: border-box; 
caption-side: top; 
clear: none; 
clip: auto; 
clip-path: none; 
clip-rule: nonzero; 
color: black; 
color-interpolation: srgb; 
color-interpolation-filters: linearrgb; 
color-rendering: auto; 
cursor: default; 
direction: ltr; 
display: inline-block; 
dominant-baseline: auto; 
empty-cells: show; 
fill: #000000; 
fill-opacity: 1; 
fill-rule: nonzero; 
filter: none; 
float: none; 
flood-color: rgb(0, 0, 0); 
flood-opacity: 1; 
font-family: Arial; 
font-size: 13px; 
font-style: normal; 
font-variant: normal; 
font-weight: normal; 
glyph-orientation-horizontal: 0deg; 
glyph-orientation-vertical: auto; 
height: 20px; 
image-rendering: auto; 
kerning: 0; 
left: auto; 
letter-spacing: normal; 
lighting-color: rgb(255, 255, 255); 
line-height: normal; 
list-style-image: none; 
list-style-position: outside; 
list-style-type: disc; 
margin-bottom: 2px; 
margin-left: 2px; 
margin-right: 2px; 
margin-top: 2px; 
marker-end: none; 
marker-mid: none; 
marker-start: none; 
mask: none; 
max-height: none; 
max-width: none; 
min-height: 0px; 
min-width: 0px; 
opacity: 1; 
orphans: 2; 
outline-color: black; 
outline-style: none; 
outline-width: 0px; 
overflow-x: visible; 
overflow-y: visible; 
padding-bottom: 0px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 0px; 
page-break-after: auto; 
page-break-before: auto; 
page-break-inside: auto; 
pointer-events: auto; 
position: static; 
resize: none; 
right: auto; 
shape-rendering: auto; 
speak: normal; 
stop-color: rgb(0, 0, 0); 
stop-opacity: 1; 
stroke: none; 
stroke-dasharray: none; 
stroke-dashoffset: 0; 
stroke-linecap: butt; 
stroke-linejoin: miter; 
stroke-miterlimit: 4; 
stroke-opacity: 1; 
stroke-width: 1; 
table-layout: auto; 
text-align: -webkit-auto; 
text-anchor: start; 
text-decoration: none; 
text-indent: 0px; 
text-overflow: clip; 
text-rendering: auto; 
text-shadow: none; 
text-transform: none; 
top: auto; 
unicode-bidi: normal; 
vector-effect: none; 
vertical-align: baseline; 
visibility: visible; 
white-space: pre; 
widows: 2; 
width: 75px; 
word-break: normal; 
word-spacing: 0px; 
word-wrap: normal; 
writing-mode: lr-tb; 
z-index: auto; 
zoom: 1; 

¿Alguna pista?

Answer 1

intrigante ... También estoy en Windows 7/Chrome 18 y el estilo de CSS para el borde funciona como se esperaba, hasta que cambie de Aero a un tema 'Windows Classic', en cuyo punto el comportamiento que has descrito ocurre. Ya se ha indicado anteriormente que este es un problema del sistema operativo Windows, pero pensé que esto podría ofrecer algo de claridad adicional.

ACTUALIZACIÓN: Al utilizar la regla CSS -webkit-appearance: none;, parece que se puede evitar el estilo de sistema operativo predeterminado del elemento select. Sin embargo, requiere un poco de CSS adicional para mantener las características de UI básicas del elemento (es decir, el botón de flecha a la derecha). Un ejemplo de trabajo está disponible aquí: http://jsfiddle.net/qZF4B/.

Answer 2

Esto se le preguntó en algún lugar antes de compra no puedo encontrar la pregunta original.

Esto es esencialmente una limitación en cromo. Al parecer, al menos en Windows, no intenta proporcionar un control total de la representación de cada tipo de elemento de entrada a través de CSS.

Si desea un control total de la apariencia de los controles, escribir código JavaScript para replicar su funcionalidad, o utilizar un kit de interfaz de usuario existente, por ejemplo, JQuery easyui o dojo.

Answer 3

Hay un truco sencillo. Use "boceto".

ex) { border:0; outline:1px solid #CCC; }

La razón por la que busco de esto es que tuve un mismo problema en Windows 7 tema clásico. Muchas personas sugieren una opción "-webkit-appearance:none;" pero esta opción también elimina el botón de flecha. Entonces recordé "esquema".Parece que el trabajo como esperaba y los códigos son muy simples.