這樣做跨瀏覽器使用CSS只有真正困難(如果不是不可能的話)才能做到。我可以想到的唯一方法就是模擬<select>
元素。首先,插入一個隱藏文字input
,它將具有選定的值。下面是模擬dropdown- select
元素的示例HTML:
<div class = "select">
<div class = "curVal">Gender</div><div class = "arrow">V</div>
<div class = "choices">
<div class = "choice">Male</div>
<div class = "choice">Female</div>
<div class = "choice">Refuse to answer</div>
</div>
</div>
讓我們的風格是:
body {
font-family: 'Arial', Helvetica, Sans-Serif;
}
.select div {
display: inline-block;
}
.curVal {
height: 30px;
width: 150px;
line-height: 30px;
vertical-align: middle;
background-color: rgb(0, 162, 232);
color: white;
}
.arrow {
color: white;
background-color: rgb(0, 140, 200); /* this can be an image */
cursor: pointer;
height: 30px;
line-height: 30px;
vertical-align: middle;
position: absolute;
top: 0px;
}
.choices {
position: absolute;
left: 0px;
top: 30px;
background-color: rgb(255, 127, 39);
color: white;
padding: 3px 3px 3px 3px;
width: 150px;
}
.choices div {
display: block;
cursor: pointer;
}
一些jQuery的:
$(document).ready()(function(){
$(".choices").hide();
});
$(".arrow").click(function(event) {
$(".choices").slideToggle("fast");
event.stopPropagation();
});
$(".choice").click(function() {
$(".curVal").html($(this).html());
$(".choices").slideToggle("fast");
event.stopPropagation();
});
$("html").click(function() {
$(".choices").slideUp("fast");
});
把它們放在一起,你會得到這樣的:jsFiddle 。
我希望能以任何方式幫助你!
謝謝,這實際上是一個聰明的解決方案,但它主要保持我稱之爲「標題部分」比實際下拉選項窄。無論如何,謝謝你,我將來可能會使用它。很好的發現。 – 2012-08-15 11:01:04