Đường viền CHỌN trong Chrome hiển thị 3D

Question

Điều này có vẻ rất đơn giản nhưng tôi không thể giải quyết được.

Tôi có một thả đơn giản đơn như thế này xuống ...

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

... và tôi muốn áp dụng đường viền phẳng (không hiệu ứng 3D), vì vậy tôi đang sử dụng:

select { 
    border:1px solid #CCC;     
} 

Xem mẫu sống ở đây: http://jsfiddle.net/GqGr3/

Nó hoạt động tốt trong Firefox và IE:

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

nhưng nó ám 3D trong Chrome:

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

Đó là cách nó hoạt động trong máy tính của tôi. Tôi đã thử nghiệm nó trên một máy tính thứ hai và nó làm cho OK. Nếu điều này xảy ra với tôi thì điều đó cũng xảy ra với những người dùng khác.

tôi không có bất kỳ phần mở rộng được cài đặt trong Chrome và các trình duyệt được cập nhật (18.0.1025.151 m), trên Windows 7.

Đây là những phong cách tính của mẫu (bao gồm di truyền), tôi không thấy bất kỳ điều gì lạ:

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

Bất kỳ đầu mối nào?

Answer 1

Hấp dẫn ... Tôi cũng đang sử dụng Windows 7/Chrome 18 và kiểu CSS cho đường viền hoạt động như mong đợi, cho đến khi tôi chuyển từ Aero sang chủ đề 'Windows Classic', tại thời điểm đó hành vi bạn đã mô tả xảy ra. Nó đã được nêu ở trên rằng đây là một vấn đề hệ điều hành Windows, nhưng tôi chỉ nghĩ rằng điều này có thể cung cấp một số rõ ràng bổ sung.

CẬP NHẬT: Sử dụng quy tắc CSS -webkit-appearance: none;, có vẻ như kiểu hệ điều hành mặc định của thành phần select có thể tránh được. Tuy nhiên, nó đòi hỏi một chút CSS bổ sung để duy trì các tính năng giao diện người dùng chủ yếu của phần tử (cụ thể là nút mũi tên ở bên phải). Một ví dụ làm việc có sẵn tại đây: http://jsfiddle.net/qZF4B/.

Answer 2

Điều này đã được hỏi ở đâu đó trước khi mua Tôi không thể tìm thấy câu hỏi ban đầu.

Đây thực chất là hạn chế trong chrome. Rõ ràng trong các cửa sổ ít nhất, nó không cố gắng cung cấp toàn quyền kiểm soát việc hiển thị của mọi loại phần tử đầu vào thông qua CSS.

Nếu bạn muốn kiểm soát hoàn toàn giao diện điều khiển của mình, hãy viết mã javascript để nhân rộng chức năng của họ hoặc sử dụng bộ công cụ giao diện người dùng hiện có, ví dụ: JQuery easyui hoặc dojo.

Answer 3

Có một mẹo đơn giản. Sử dụng "đường viền".

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

Lý do tôi tìm kiếm về việc này là tôi đã có một vấn đề tương tự trên Windows 7 theme Classic. Nhiều người đề xuất một tùy chọn "-webkit-appearance:none;" nhưng tùy chọn này cũng sẽ xóa nút mũi tên. Sau đó, tôi nhớ lại "phác thảo".Có vẻ như công việc như tôi mong đợi và các mã số rất đơn giản.