问题描述
我尝试在某些表单元素上渲染渐变背景.虽然它在文本和文本区域中可以正常工作,但似乎不适用于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的框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!