通過將選擇框隱藏在文本框下面來設計選擇框

很顯然，完全不能設計選擇框的樣式，因此我回想一下在某些情況下可以設置樣式文本框的樣式，然後隱藏選擇在它下面的盒子。通過將選擇框隱藏在文本框下面來設計選擇框

我剛剛試過這個，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; 
}

來源

2012-10-14 Brett

能否請您發表一些代碼，或者使用http://jsfiddle.net/向我們展示一個例子？謝謝。 –

@ErenorPaz完成。 :) – Brett

呃..現在我明白了一點:)你真的只想HTML + CSS？這樣，您不能完全設計選擇框的樣式，但當然也有解決方法：您可以將選擇放入短一點的div中，使用overflow：hidden，並放置選擇框以便隱藏箭頭。然後，其餘的選項，你可以輕鬆地設計他們:) @brett –

您可以使用此jQuery代碼

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

來源

2012-10-14 10:07:35

通過將選擇框隱藏在文本框下面來設計選擇框

回答

相關問題