您可以使用<div>
而不是<button>
HTML:
<div class="btn btn-small select-container">
<select>
<option>title</option>
<option>date</option>
<option>author</option>
</select>
</div>
CSS:
.btn.btn-small{
padding-bottom: 2px;
padding-top: 2px;
color: #737373;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 14px !important;
font-variant: small-caps;
font-weight: bold;
}
.btn.select-container {
position: relative;
padding-right: 24px;
}
.btn.select-container select {
position: absolute;
top: -1px;
left: 0;
height: 117%;
width: 100%;
opacity: 0;
filter: alpha(opacity=0);
z-index: 1000;
}
select.btn {
width: initial;
height: 23px;
padding-right: 20px;
-webkit-appearance: none;
}
select.btn:focus {
outline: none;
}
.select-container {
position: relative;
}
在这里看到它:http: //jsfiddle.net/YyvRf/3/