选择框箭头未正确对齐 - 仅适用于 Google Chrome。
我使用了 CSS3 功能 - 链接下方的引用
http://cssdeck.com/labs/styling-select-box-with-css3
Firefox 和 IE 工作正常
HTML代码
<div id="cnt">
<!-- form start here -->
<form class="ffm">
<!-- Find a course title pod start here -->
<div class="fo">
<h3>Find a course</h3>
<!-- back button start here -->
<a class="bbtn frn" href="javascript:void(0);">Back</a>
<!-- back button end here -->
</div>
<!-- Find a course title pod end here -->
<!-- ENTRY POINTS start here -->
<div class="fo mb36">
<label for="entry">ENTRY POINTS</label>
<span class="sbx">
<select name="entry">
<option>A-levels</option>
<option>B-levels</option>
<option>C-levels</option>
<option>D-levels</option>
</select>
</span>
</div>
<!-- ENTRY POINTS end here -->
<!-- Your grades / Expected grades start here -->
<div class="fo">
<label for="grads">Your grades / Expected grades</label>
<div class="fl">
<!-- A* select box start here -->
<span class="sbx gs">
<select name="a">
<option>A*</option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
<!-- A* select box end here -->
<!-- B select box start here -->
<span class="sbx gs">
<select name="b">
<option>B</option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
<!-- B select box end here -->
<!-- D select box start here -->
<span class="sbx gs">
<select name="d" class="mb20">
<option>D</option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
<!-- D select box en here -->
</div>
<div class="fr">
<!-- A select box start here -->
<span class="sbx gs">
<select name="aa">
<option>A</option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
<!-- A select box end here -->
<!-- C select box start here -->
<span class="sbx gs">
<select name="c">
<option>C</option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
<!-- C select box end here -->
<!-- E select box start here -->
<span class="sbx gs">
<select name="e" class="mb20">
<option>E</option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
<!-- E select box end here -->
</div>
</div>
<!-- Your grades / Expected grades end here -->
<!-- subject start here -->
<div class="fo">
<label>Subject</label>
<span class="sbx">
<select name="subject">
<option>All economics subjects</option>
<option>Economics</option>
<option>Business</option>
<option>Economics subject</option>
<option>Economics subject</option>
</select>
</span>
</div>
<!-- subject end here -->
<!-- Course Type start here -->
<div class="fo">
<label>Course Type</label>
<span class="sbx">
<select name="course">
<option>All course types</option>
<option>MBA</option>
<option>Business management</option>
<option>Arts</option>
<option>Agriculture and related</option>
</select>
</span>
</div>
<!-- Course Type end here -->
<!-- Location start here -->
<div class="fo">
<label>Location</label>
<span class="sbx">
<select>
<option>Anywhere</option>
<option>East Anglia</option>
<option>North East England</option>
<option>West Midlands</option>
</select>
</span>
</div>
<!-- Location end here -->
<!-- button pod start here -->
<div class="fo mb10">
<div class="fl">
<!-- Reset button start here -->
<a class="bbtn rsb" href="javascript:void(0);">Reset</a>
<!-- Reset button end here -->
</div>
<div class="fr">
<!-- find courses button start here -->
<input type="button" class="fcbtn" value="Find courses" />
<!-- find courses button end here -->
</div>
</div>
<!-- button pod end here -->
</form>
<!-- form end here -->
</div>
CSS 代码
html,body,form,div,p,ul,ol,h1,h2,h3{padding:0;margin:0;}
img,a{outline:0;border:0;text-decoration:none;}
ul,ol{list-style:none;}
body{font-family:arial,helveltica,serif;font-size:100%;}
#cnt{width:auto;padding:20px;overflow:hidden;background:#dfdfdf;}
h3{
font-size:18px;
color:#5e5e61;
float:left;
}
.fo{
clear:both;
margin-bottom:20px;
}
.bbtn,.fcbtn{
font-size:15px;
font-weight:bold;
color:#fff;
background:#bfbfc0;
padding:10px 20px;
text-align:center;
border-radius:5px;
box-shadow:0 2px 0 0 #868686;
border:0;
}
.bbtn:hover{
background:#aaa;
}
.fcbtn{
background:#00b26d;
width:100%;
cursor:pointer;
padding:9px 20px 10px;
}
.fcbtn:hover{
background:#01a163;
}
.rsb{
width:70%;
display:block;
}
.frn{float:right !important;}
.fo label{
display:block;
font-size:11px;
color:#6d6c70;
text-transform:uppercase;
padding-bottom:10px;
}
.fo select{
font-size:13px;
font-weight:bold;
color:#6d6c70;
padding:15px;
width:100%;
border-radius:5px;
border:0;
}
.gs select{
margin-bottom:4%;
}
.mb20{
margin-bottom:20px !important;
}
.mb36{
margin-bottom:36px;
}
.mt10{
margin-top:10px;
}
.fl{
width:49%;
float:left;
}
.fr{
width:49%;
float:right;
}
/*firefox hack */
@media screen and (-webkit-min-device-pixel-ratio:0) {
select {padding-right:18px}
}
.sbx {position:relative}
.sbx:after {
content:'>';
font:bold 25px "Consolas", monospace;
color:#b6b5b7;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
right:18px;
top:-5px;
padding:0 0 2px;
position:absolute;
pointer-events:none;
}
.sbx:before {
content:'';
right:15px; top:0px;
width:42px; height:20px;
background:#fff;
position:absolute;
pointer-events:none;
display:block;
}
请检查
http://jsfiddle.net/anglimass/gtxHh/
提前致谢
最佳答案
我认为您不应该尝试通过覆盖内容来设置 native 选择框的样式。这会中断，因为 native UI 元素的布局和尺寸超出您的范围(请参阅移动设备、电视浏览器等)
您可以尝试一些现有的选择框自定义实现，例如。 http://jquery-plugins.net/tag/custom-select ，如果样式至关重要。
关于html - CSS3 选择框单独正确对齐 Google Chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17739423/