Chrome SELECT border displays 3D

Question

It looks very simple, but I can’t solve it.

I have a simple drop down menu like this ...

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

... and I want to apply a flat border (without a 3D effect), so I use:

 select { border:1px solid #CCC; } 

See a live example here: http://jsfiddle.net/GqGr3/

It works fine in Firefox and IE:

_{(source: re-moto.com )}

but it displays 3D in Chrome:

_{(source: re-moto.com )}

This is how it works on my computer. I checked it on a second computer and it shows OK. If this happens to me, it can happen to other users.

I have not installed any extensions in Chrome, and the browser is updated (18.0.1025.151 m) in Windows 7.

These are the calculated styles of the sample (including inherited), I do not see anything strange:

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

Any clue?

Answer 1

Intriguing ... I'm also on Windows 7 / Chrome 18, and the CSS style for the frame works as expected until I switch from Aero to the "Windows Classic" theme, which indicates the behavior that you described. It has already been said above that this is a Windows OS problem, but I just thought that this could provide additional clarity.

UPDATE. Using the CSS rule -webkit-appearance: none; It looks like the default OS style of the select element can be avoided. However, a little extra CSS is required to support the basic elements of the user interface element (for example, the arrow buttons on the right). A working example is available here: http://jsfiddle.net/qZF4B/ .

Answer 2

There is a simple trick. Use the "outline" .

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

I have been looking for this since I had the same problem in Windows 7 Classic. Many people offer the option " -webkit-appearance:none; ", but this option also removes the arrow button. Then I remembered the "plan." It seems to work as I expected, and the codes are very simple.

Answer 3

It was asked somewhere before the purchase, I can not find the original question.

This is essentially a limitation in chrome. Apparently, on Windows at least, he is not trying to provide full control over the rendering of each type of input element through CSS.

If you want to completely control the appearance of your controls, write javascript code to reproduce their functionality or use an existing set of user interface, for example. JQuery easyui or dojo .