添加渐变以选择带有Chrome的CSS3的框? [英] Add gradient to select box w/ CSS3 in chrome?

问题描述

我尝试在某些表单元素上渲染渐变背景.虽然它在文本和文本区域中可以正常工作，但似乎不适用于Chrome/Safari中的选择(尽管它在FF3上也可以工作).有没有办法做到这一点?

I'm try to render a gradient background on some form elements. While it works fine for text and text areas, the same does not seem to work for selects in Chrome/Safari (though it does work on FF3) . Is there a way to accomplish this?

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>

实时演示

我注意到的另一件事是，即使它们都设置为width:400px，在Chrome&火狐浏览器.为什么会这样?

Another thing I noticed is that even though they are both set to width: 400px, the select is noticeably shorter in both Chrome & Firefox. Why is this?

推荐答案

im不能完全确定是否可以在任何浏览器中选择样式.它们一直是CSS的痛苦.

im not entirely sure if you can style selects that much in any browser. They have always been a pain for css.

在选项中，选项不会扩展到文本的宽度，在Firefox中，由于下拉图标等而使选项变短.为它们使用css只是一个痛苦.如果必须具有样式选择框，则可以查看jquery UI，因为我相信它们具有一些可样式化的选择框

In ie, options wont expand to the width of the text, in firefox, they are shorter because of the dropdown icon etc. Its just a pain to use css for them. If you must have a styled select box, you can look at jquery UI as i believe they have some stylable select boxes

这篇关于添加渐变以选择带有Chrome的CSS3的框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！