Question

显然，完全不可能对选择框进行样式设置，因此我记得在一段时间内阅读一个方法，例如你可以设置一个文本框的样式，然后隐藏它下面的选择框。

我刚刚使用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;
}

Answer 1

您使用此jquery代码

$(function(){
   $("#YourTextBoxId").focus(function(){
      $("#YourDropDownName").hide();
   })
})

通过将选中框隐藏在文本框下来为其设置样式

1 个答案: