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 に答える