html - 通过将选择框隐藏在文本框下来设置选择框的样式

Question

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

我刚才用 绝对定位 和 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();
   })
})