bordo SELECT in rendering 3D 3D

Question

Sembra molto semplice ma non riesco a risolverlo.

Ho un semplice menu come questo verso il basso ...

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

... e voglio applicare un bordo piatta (nessun effetto 3D), in modo da sto usando:

select { 
    border:1px solid #CCC;     
} 

vedi esempio vivo qui: http://jsfiddle.net/GqGr3/

funziona bene in Firefox e IE:

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

ma rende 3D in Chrome:

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

Ecco come funziona nel mio computer. L'ho provato su un secondo computer e rende OK. Se mi sta succedendo, anche a me succedono altri utenti.

Non ho nessun estensioni installate in Chrome e il browser sia aggiornato (18.0.1025.151 m), su Windows 7.

Questi sono gli stili calcolati del campione (comprese ereditato), I non vedo nulla di strano:

-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; 

Qualsiasi indizio?

Answer 1

Intrigante ... Sono anche su Windows 7/Chrome 18 e lo stile CSS per il bordo funziona come previsto, fino a passare da Aero a un tema 'Windows Classic', a che punto il comportamento hai descritto si verifica. È già stato detto sopra che si tratta di un problema del sistema operativo Windows, ma ho pensato che questo potrebbe offrire ulteriore chiarezza.

AGGIORNAMENTO: Utilizzando la regola CSS -webkit-appearance: none;, sembra che lo stile operativo predefinito dell'elemento select possa essere evitato. Tuttavia, richiede un po 'di CSS in più per mantenere le caratteristiche dell'interfaccia utente di graffatura dell'elemento (vale a dire il pulsante freccia a destra). Un esempio di lavoro è disponibile qui: http://jsfiddle.net/qZF4B/.

Answer 2

Questo è stato chiesto da qualche parte prima di acquistare Non riesco a trovare la domanda originale.

Questa è essenzialmente una limitazione in chrome. Apparentemente in Windows almeno, non tenta di fornire il pieno controllo del rendering di ogni tipo di elemento di input tramite CSS.

Se si desidera il pieno controllo dell'aspetto dei controlli, scrivere codice javascript per replicare la loro funzionalità o utilizzare un kit UI esistente, ad es. JQuery easyui o dojo.

Answer 3

C'è un trucco semplice. Utilizzare "schema".

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

Il motivo che cerco di questo è che ho avuto un stesso problema su Windows 7 Tema Classic. Molte persone suggeriscono un'opzione "-webkit-appearance:none;" ma questa opzione rimuove anche il pulsante freccia. Poi ho ricordato "contorno".Sembra che funzioni come mi aspettavo e che i codici siano molto semplici.