通过将选择框隐藏在文本框下方来样式化

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();
   })
})