http://xd.othree.net/tmp/radio2select.html

詳細說明等我精神好點再說，這是昨天想到兩個點子的其中一個。缺點：只能用hover，沒辦法做成滑鼠點一下，如果表單在頁面最下方，選項會跑到頁面外(會需要往下scroll)。回想弄這個的原因也是因為Sselect的style可變動的地方有限。

另外這個頁面有用-moz-border-radius這個mozilla專用的style，還有IE沒效果(不過radio會正常列出)。

天啊 有沒有這麼神啊
多來幾次就可以幫你加上 CSS 創意大師的稱號了

_________________
雜工 :: 柏強 / Bob Chao
發問討論請保持禮節，在志工社群裡沒有人有「義務」要為您做些什麼。

* MozTW 志工無限招募中，開放網路世界需要您的一臂之力

有bug啊,按幾次Tab看看~

那是故意的，我還會加上after和before^^b，這是為了確保親和力好讓使用者知道你游標移到哪個選項:P。

我沒這麼神啦，後來想到還有點問題，就是它現在不是inline物件了@_@

http://xd.othree.net/tmp/radio2select.html

應該是短期之內的定版了，雖然和預想的不太一樣，不過還是可以勉強一用，現在主要問題是opera不支援:checked和opacity，所以會變很慘(IE的話只是把radio列出來，反而沒問題)，教學還是會寫，這次用到很tricky的技巧XD。

一樣，更新的話以我網站上的為主:P。



為什麼要用radio模仿select呢，因為select標籤也是沒辦法完全依照自己希望設定樣式的物件之一，舉例來說，他的邊框我就沒辦法設定。因此我一直在尋找方法來處理這個問題，直到想到之前的:checked應用的方法之後，才似乎出現了一絲署光，不過一直拖到最近才有座法的構想，沒想到實際做起來還是遇到不少問題，但還是做出了一個可以用的版本，雖然還有些問題。

接著我們來看看這是怎麼做到的，為了模仿select標籤，我們的要求有幾個：

1. 滑鼠移過去時選項會垂直展開（很可惜做不到點選式的）。
2. 展開時會浮在下方物件的上面，不會因此而把物件往下推。
3. 可以只用鍵盤做到選擇選項（親合力）。
4. inline物件。

首先簡單的把radio物件和label標籤列出來，如範例一，接著我們要把radio隱藏起來，讓label垂直條列，隱藏radio用的方法和以前一樣，讓label垂直條列我是用float+clear的方法來達成，當然，還是要配合+選擇子，結果如範例二，其中radio的style需要特別說明一下：



和之前的:checked應用不一樣，因為float和clear的設定，radio和label會一個一個交錯的疊在一起，看起來就像範例二之一一樣，接著設定margin-bottom為"-2em"，目的是為了讓radio物件下方的東西能和他完全重疊，就變成範例二之二的樣子，，在這個範例裡我把label的底色改成透明，好讓大家能看到現在radio的位置。接著設定opacity就可以讓radio隱藏起來。

再來我們設定一下:hover和:checked的樣式，好讓我們能清楚判斷現在選項的狀況，這部分主要是選擇子的設定，就不詳細說明，詳見範例三。在來是要求之ㄧ的展開效果了，在範例一的HTML碼裡面可以看到radio和label外面有一層span標籤，基本上我們就是利用它來針對我們要處理的label標籤做選擇的，結果如範例四，這時候已經有展開動作了，但是還會把下面的東西推開，所以接下來我們就針對這點來做修改，而範例四中其他關於border的設定，是為了把兩個label間較粗的邊框改成和旁邊一樣細的邊框。

要讓label可以浮在其他物件的上面，我們要更改的就是他的margin值，我的想法是把class=select的那個span物件的margin-bottom設成-100%，我們先來看看這樣子會發生什麼事，請見範例五之一，可以見到，之前會影響到下方排版的問題已經解決了，但是select物件卻和後面的按鈕重疊在一起了，這是因為我的margin: -100%;的設定讓select物件在版面中不佔任何空間，所以本來應該排在後面的按鈕就往前移動了，為了解決這個問題，我必須被迫增加一層span標籤（這是我不滿的第一點），或許有人會說可以設定動態的margin值，讓它剛好有點高度，但是問題是我不知道會有幾個選項，如果選項數固定的話，確實可以這樣做，但是這樣對於未來的維護實在不方便，所以我不採用這個方法。範例五，是我多加一層span並且已經把該有的css設定都弄上了，結果完全OK，CSS CODE如下。




我指定外層的span的height=1px，然後之前對於select物件的設定全部給內層的span，結果就是一個1px高的block物件裡面包著一個0px高的block物件，外層是用來製造寬度，內層是用來讓它的高度等於0。於是四個目標達成了兩個，接著便是鍵盤的控制了。

要讓鍵盤能操控，只要用上focus，讓tab鍵移動游標到該選項時使用者能知道，不過我再配合:after虛擬選擇器和content屬性質，增加一點提示，結果如範例六，這時大家可以試試看用tab和空白鍵更換選擇看看，不過唯一需要注意的是這裡新增的CSS值必須要放在範例四的span.select:hover label的設定前面，不然margin值會有錯誤，當然你也可以選擇不要修改margin，這樣要放哪都可以(吧XD)。

終於，只剩下最後一個目標了，讓它是inline物件，放在它後面的東西看起來沒問題，但是放在它前面的呢？就先來看看會怎樣吧，範例七之ㄧ，果然，變亂了...orz，這個問題，我想了很久要如何解決，最後，只能讓它前面的文字也是float:left;（這是第二個我不滿的地方），於是我新增了一個class叫label，範例七。

終於，四個目標都達到了，完整的HTML和CSS見最後一個範例，雖然還有些覺得還可以改進的地方，而且Opera會亂掉，不過因為用了一些蠻有趣的技巧，所以還是把它寫出來了，延伸的用法，可以看看應用。

是很有創意啦, 我也相當佩服作者長時間弄出來的成果。
但我實在不明白, 為什麼不用XBL來做?

不同CSS的組合確能做到無限的可能性, 但上面的CSS對於普通人來說可謂相當難理解... 有點遮去了CSS的易讀性。
加上現實各家瀏覽器對CSS的實做方式不一, 在未經多個瀏覽器的測試下, 很容易產生出很多未預期的效果啊。

我期待各家瀏覽器都能支援標準的時候來到，所以還是用HTML+CSS，而且我都是想辦法設計成只要引入外部樣式，HTML部分只要修改一點就可以有效果出來（不過這個case有不少缺點，所以應該不會有這東西:P，寫說明是希望有人在了解過程中想到更多靈感），而這個case我主要不滿的就是要做到兩層span標籤，本來我是希望只要一個span把選項包起來加上class就可以，這樣其他人要套用也是很簡單，麻煩的反而會是用radio和label把選項列出來。

大部分人會覺得複雜難懂也是我意料之中^^，這不算是CSS教學，我比較傾向當成範例。至於未預期的效果，Opera不支援:checked、opacity，所以確實很慘，IE的話則是在選項太多會爆XD(最後一個應用的範例用IE看就知道了)，相較之下之前單純使用:checked虛擬選擇器的用法要實用多了。

应尽量做成一个对象,有整体性,
如果你这东西跟select混着用就肯定会出问题,
如有frame/iframe,你这东西肯定不管用,
你定义的css不通用,如ie就不管用,

我觉得目标要清晰:功能能跟select媲美就行,美观上一定要比select强很多,能用css自定义每个细节的样式
ie的select控件做的简直是太烂了,设计师绝对是个卖菜的主,
若感兴趣,可以一块探讨一下,