帶有圖像的下拉選擇
您希望建立一個顯示圖像而不是文字的下拉選擇。雖然經常建議使用 jQuery 組合框,但它仍然需要在圖像旁邊添加文字。
解決方案:用圖像替換文字
令人驚訝的是,您可以在沒有 JavaScript 的情況下實現此下拉式選單!操作方法如下:
HTML 結構
使用單選按鈕和標籤:
<div>
CSS 樣式
使用CSS 設定它們的樣式。隱藏單選按鈕,將標籤設定為看起來像下拉選項,並使下拉式選單在懸停時展開。
#image-dropdown { /* Style the "box" in its minimized state */ ... } #image-dropdown:hover { /* When expanded, the dropdown will get native means of scrolling */ ... } #image-dropdown input { /* Hide the nasty default radio buttons */ ... } #image-dropdown label { /* Style the labels to look like dropdown options */ ... } ... #image-dropdown input:checked + label { /* Make the selected option visible in the collapsed menu */ ... }
功能
單選按鈕連結到標籤這樣點選標籤就會啟動對應的單選按鈕。當您將滑鼠懸停在下拉清單上時,它會展開,顯示所有圖像選項。即使在折疊狀態下,所選影像仍然可見。
範例
看完整範例:http://jsfiddle.net/NDCSR/1/
實作詳細資訊
以上是如何使用圖像而不是文字建立下拉式選單?的詳細內容。更多資訊請關注PHP中文網其他相關文章!