css - 在 chrome 中添加渐变到带有 CSS3 的选择框？

Question

我尝试在某些表单元素上呈现渐变背景。虽然它适用于文本和文本区域，但似乎不适用于 Chrome/Safari 中的选择(尽管它适用于 FF3)。有办法实现吗？

CSS 代码:

        .prettyform input, .prettyform textarea, .prettyform select {
            padding: 9px;
            border: 1px solid #E2E3E5;
            outline: 0;
            width: 400px;
            box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
            -moz-box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
            -webkit-box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
            background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #E2E3E5), to(#FFFFFF));  
            background: -moz-linear-gradient(top, #FFFFFF, #E2E3E5 1px, #FFFFFF 25px);
        }

HTML 标记:

    <form class='prettyform'>
        <p>
        <label>Text Input</label> <br>
        <input type='text' name='test1'>
        </p>
        <p>
        <label>Select Input</label> <br>
        <select name='test2'>
            <option value='1'>Option 1</option>
            <option value='2'>Option 2</option>
            <option value='3'>Option 3</option>
        </select>
    </form>

Live Demo

我注意到的另一件事是，即使它们都设置为 width: 400px，Chrome 和 Firefox 中的选择明显更短。这是为什么？

Answer 1

我不完全确定您是否可以在任何浏览器中选择那么多样式。它们一直是 css 的痛点。

在 ie 中，选项不会扩展到文本的宽度，在 firefox 中，由于下拉图标等原因，它们更短。为它们使用 css 只是一种痛苦。如果你必须有一个样式化的选择框，你可以看看 jquery UI，因为我相信他们有一些样式化的选择框