SELECT border in Chrome renders 3D

Question

This looks very simple but I can't solve it.

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

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

...and I want to apply a flat border (no 3D effect), so I'm using:

select {
    border:1px solid #CCC;                
}

See live sample here: http://jsfiddle.net/GqGr3/

It works fine in Firefox and IE:

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

but it renders 3D in Chrome:

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

That's how it works in my computer. I tested it on a second computer and it renders OK. If this is happening to me it my also happen to other users.

I don't have any extensions installed in Chrome and the browser is up to date (18.0.1025.151 m), on Windows 7.

These are the computed styles of the sample (including inherited), I don't 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?

It's not (only) the browser, it's the OS/desktop environment. Here's Gnome on Linux, latest Chrome: http://stommepoes.nl/tempscreenshotso.png looks nothing like your Windowsy screenshots. My advice to you: if you want to keep your hair, leave the styling of form controls at this level alone. Either that, or a huge pile of Javascript to attempt to imitate form controls with your graphic design. — stommepoes, Apr 07 '12 at 15:41

Aaron · Accepted Answer · 2012-04-10T18:37:09.743

9

Intriguing... I'm also on Windows 7/Chrome 18 and the CSS styling for the border is working as expected, until I switch from Aero to a 'Windows Classic' theme, at which point the behavior you've described occurs. It's already been stated above that this is an Windows OS issue, but I just thought this might offer some additional clarity.

UPDATE: Using the -webkit-appearance: none; CSS rule, it appears that the default OS styling of the select element can be avoided. However, it requires a bit of extra CSS to maintain the staple UI features of the element (namely the arrow button at the right). A working example is available here: http://jsfiddle.net/qZF4B/.

edited Apr 10 '12 at 18:37

answered Apr 09 '12 at 14:43

Aaron

5,137
1
18
20

You are right! I switched from Windows Classic theme to an Aero theme, restarted Chrome and the rendering is working as I expect (at least on my environment). – Guscie Apr 10 '12 at 14:12
1

@Gustavo I've updated my answer with a pure-CSS solution that may interest you. – Aaron Apr 10 '12 at 18:33

Quidn · Answer 2 · 2016-04-20T22:44:52.180

1

There is a simple trick. Use "outline".

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

The reason I search about this is I had a same problem on Windows 7 Classic theme. Many people suggests an option "-webkit-appearance:none;" but this option also removes the arrow button. Then I recalled "outline". It seems that work as I expected and the codes are much simple.

edited Apr 20 '16 at 22:44

answered Feb 06 '13 at 19:16

Quidn

1,202
1
9
6

1

Do note though that outline does not work with border-radius. – Evan Purkhiser Apr 23 '13 at 17:23

score 0 · Answer 3 · answered Apr 09 '12 at 14:30

This was asked somewhere before buy I can't find the original question.

This is essentially a limitation in chrome. Apparently in windows at least, it doesn't attempt to provide full control of the rendering of every input element type via CSS.

If you want full control of the appearance of your controls, write javascript code to replicate their functionality, or use an existing UI kit, e.g. JQuery easyui or dojo.

SELECT border in Chrome renders 3D

3 Answers3

Linked