样式下拉（选择）框 [英] styling dropdowns (select) boxes

问题描述

我知道有可能使用jquery做一个看起来像一个选择框的东西，所以我可以让它看起来，但我想要的。

I know it's possible with jquery to make something that looks like a select box so I can make it look however I want. However, with just css, how much control do I have?

我使用边框，填充和宽度，最终结果看起来不错。

I use border, padding, and width, and the end result looks great.

唯一让我困扰的是下落的部分。有什么控制吗？

The only thing that bothers me is the part that drops down. Is there any control over this? (It looks dumb to have padding and on the drop down list have none).

推荐答案

你有一些控制，但有在浏览器和操作系统之间有很大的变化。例如，Windows上的Internet Explorer将始终显示标准的灰色向下箭头，即使您可以在其他浏览器中对其重新着色。

You have some control, but there is quite a bit of variation between browsers and operating systems. For example, Internet Explorer on Windows will always show the standard grey down arrow, even though you can re-colour this in other browsers.

对于下拉的部分 - 这些是选项标签，不选择;因此要更改它们，您将对选项标签应用样式：

As for the part that drops down - these are option tags, not select; so to change them you'll be applying styles to the option tag instead:

select {
   border: 1px solid red;
}

option {
   background-color: blue;
}

幸运的是，一些其他人已经做了一些研究，详细说明什么有效， ，所以这里有一些资源给你：

Luckily some other people have done some research detailing what works and what doesn't, so here are some resources for you:

• 一般为样式控制： http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/


• 具体选择： http://www.456bereastreet.com/lab/styling -form-controls-revisited / select-single /


• 浏览器比较： http://www.electrictoolbox.com/style-select-optgroup-options-css/

• Styling form controls in general: http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/
• Selects specifically: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/
• Browser comparison: http://www.electrictoolbox.com/style-select-optgroup-options-css/

这篇关于样式下拉（选择）框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！