0

显然，不可能完全设置选择框的样式，因此我记得以前读过一种方法，例如，您可以设置文本框的样式，然后将选择框隐藏在其下方。

我刚刚尝试了这个absolute positioning并使用z-index; 但是，正如您可能期望的那样，当您单击文本框时，您看不到下拉选择选项。

这种方法真的可行吗？如果是这样，怎么做？

如果不是，是否有任何非javascript方法适用于所有浏览器？

编辑：

这是一些示例代码..

<div class="cats">
    <input type="text" name="cat_show" value="All Categories" readonly="readonly" />
    <select name="cat">
        <option value="all">All Categories</option>
        <option value="cat1">Cat 1</option>
        <option value="cat2">Cat 2</option>
        <option value="cat3">Cat 3</option>
        <option value="cat4" class="last">Cat 4</option>
    </select>
</div>

CSS：

#header .nav .misc .search .search_holder .cats {
    float: left;
    position: relative;
}

#header .nav .misc .search .search_holder .cats input {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 111px;
    height: 25px;
    padding-left: 8px;
    background: url('../images/search-cats-bg.png') 0 0 no-repeat;
    font-family: Roboto, Arial;
    font-size: 14px;
    color: #b2b2b2;
    cursor: default;
    z-index: 3;
}

#header .nav .misc .search .search_holder .cats select {
    position: absolute;
    top: 0px;
    left: 0px;    
    width: 119px;
    height: 29px;
    padding-left: 8px;
    font-family: Roboto, Arial;
    font-size: 14px;
    background: url('../images/form-text-bg.png') 0 0 repeat-x;
    color: #b2b2b2;
    z-index: 2;
}

#header .nav .misc .search .search_holder .cats select option {
    padding-top: 5px;
}

#header .nav .misc .search .search_holder .cats select option.last {
    padding-bottom: 5px;
}
4

1 回答 1

0

你使用这个 jquery 代码

$(function(){
   $("#YourTextBoxId").focus(function(){
      $("#YourDropDownName").hide();
   })
})
于 2012-10-14T10:07:35.373 回答