如何用css和div控制html頁面中的下拉列表框(select)

        近日在做一個小型項目的時候,發現ie6中不能用css控制select下拉列表框的樣子,甚是鬱悶,後來google了一番,加上自己的嘗試,終於使用外嵌div的方式比較圓滿的解決了這個問題,特寫此稿,分享自己的心得體會。

        首先,在ff2.0中,對select的樣式控制是可以被渲染的,至於mac下的safari會不會渲染對select的樣式控制,沒有試過,不得而知,僅針對使用最廣泛的ff2.0和ie6做了下面一個例子。

        select下拉列表框樣式控制的關鍵就是在其外面嵌套一個div,並控制div邊框格式以及其overflow屬性,並請注意div和select各自的position屬性,這個也很重要哈,大家可反覆設置這幾個屬性的不同取值,做做實驗,就明白其中道理了

        大家可以從附件中下載源代碼查看。把這段代碼保存爲一個html文件,分別用ff2.0和ie6瀏覽,即可得到如下效果:

發佈了3 篇原創文章 · 獲贊 0 · 訪問量 2753
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章