我试图在Opera中为select元素添加样式,但遇到了困难。
问题在于,在CSS中应用的大多数样式会显示在Opera(11.60)中,但由于某些原因,有些样式被留下了,例如框阴影效果和边框半径。
在我看来,Opera将选择的元素显示在这些样式之上,因为在过渡中我注意到曲线边框确实存在,只是在选择的元素后面。也就是说,未聚焦的选择元素似乎没有边框半径效果,但是当对元素应用焦点时,您会看到边框在过渡中然后再次消失在元素后面。
在IE 9、Firefox 9和最新版本的Chrome中,所涉及的选择元素几乎是一致的。而且在所有浏览器中,包括Opera在内,应用相同元素样式的输入元素完美地输出。
以下为HTML代码:
<div class="searchBox">
<form method="post" action="'.$_SERVER['PHP_SELF'].'" name="search">
<label for="bizName">Biz Name:</label>
<input name="bizName" class="bizName" type="search" placeholder="Search..." />
<label for="bizCategory">Biz Category:</label>
<select name="bizCategory" class="bizCategory" onchange="this.form.submit()">
<option>Choose</option>
</select>
<button type="submit" name="searching" class="search" value="Search">Search</button>
</form>
<!-- end .searchBox --></div>
以下是页面的CSS:
input, select {
background: #fcfcfc;
border: 0px none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #6a6f75;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: , 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-background-clip: padding-box;
-webkit-transition: all 0.7s ease-out 0s; /* Saf3.2+, Chrome */
-moz-transition: all 0.7s ease-out 0s; /* FF4+ */
-ms-transition: all 0.7s ease-out 0s; /* IE10? */
-o-transition: all 0.7s ease-out 0s; /* Opera 10.5+ */
transition: all 0.7s ease-out 0s;
}
input {
padding: 7px 25px;
width: 135px;
}
select {
padding: 7px 10px;
width: 185px;
}
input:focus, select:focus
{
background: #6699cc;
color: #e7f3ff;
text-shadow:
-1px -1px 0 #666,
1px -1px 0 #666,
-1px 1px 0 #666,
1px 1px 0 #666;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}
.bizCategory {
margin-right: 15px;
}
我不明白为什么Opera要这样反应,因为我认为它在某种程度上支持W3C规范?
无论如何,我的假设是Opera正在对此select标记应用某种默认样式。但这只是一个假设。
有没有其他人能够提供相关的信息?或者有没有经历过这个问题的人能够解释一下这里到底发生了什么?
非常感谢您花时间阅读!