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

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

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

input[type='radio']
{
	opacity: 0;
	margin-bottom: -2em;
	float: left;
	clear: left;
}

和之前的: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.select>span
{
	display: block;
	margin-bottom: -100%;
	position: relative;
}
span.select
{
	display: block;
	float: left;
	height: 1px;
}

我指定外層的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會亂掉，不過因為用了一些蠻有趣的技巧，所以還是把它寫出來了，延伸的用法，可以看看應用。

最早的我也是只會寫IE only的網頁，因為個性的關係，就特別去找了HTML和CSS的規格書在研究，也不是那時候就通了，了解標準的重要，只是因為會想要從根本開始自己弄，網路上相關的教學資料也一直在找，不過和標準有關的中文資料實在很少，只能一直使用試誤法和走旁門的方式讓IE和Firefox看起來盡量一樣，於是我第一個轉型後的成品出來了，到最後我還是必須在Firefox多加兩個CSS設定，而且現在來看應該還可以減少不少標籤。

之後，我就在幾個有限的英文網站（其中我記憶最深刻的是mezzoblue，我覺得Dave Shea的網站做的真是超棒）中游走，某一天不小心逛到了hlb的WikiWay，我才發現原來台灣也有一群人有在為了網路標準而努力。在hlb的blog看到Designing with Web Standard（中譯:跨平台網頁設計--使用Web標準技術，旗標代理）這本書的一點介紹，我就去買了，現在實在想不起來我那時候會花上17xx買一本還不確定內容是什麼的原文書來看，不過，我還真是蠻慶幸我先買了這本書來看，事實上我覺得有意專職設計網頁的人都該看看這本書，我還會另外發一篇文章來介紹這本書。

邊看Designing with Web Standard，我邊設計自己的部落格樣板，還參加了幾場部落格隨便聚（目前停止舉辦了的樣子），不過那時候我卻覺得網路上似乎沒地方討論遵循網頁標準的問題，#elixus那邊的人其實不適合討論技術的東西（我覺得那邊人文思想比較重，其實也蠻讓我羨慕的啊XD），hlb又去當兵，他的部落格和網站都被Spam強烈入侵@_@。不知又晃蕩多久，才發現moztw的討論區有（對不起我都用英文版的），雖然主題稍微和我的目標不一樣，不過還是OK啦，之後也順便參加了mozParty和Firefox 1.0發表的研討會，對我來說都是不錯的體驗，其中，印象最深刻的是研討會的第二場葉平教授的演講。

嚴格說來，讓我印象深刻的是Tim Berners-Lee（WWW和W3C的創始人）的理念，他認為WWW不該為任意人或任意公司所獨占，應該是大家都平等共享的，所以網路標準才會這麼重要。我覺得他受封真的是受之無餽。而在那時候，我製作網頁都還是會努力讓IE和Firefox瀏覽都沒問題的，沒想到今天我看到IE那邊顯示上有問題卻不想理會它。

我認為，IE造成標準混亂，但是錯不在使用IE的使用者，所以我會讓用IE來我的網頁的人也能正確的看到我想展示的內容（包含style），當然也可以像Virtuelvis那樣，讓IE使用者的style簡化並附上說明，建議使用者使用其他瀏覽器，不過很可惜Virtuelvis現在用IE看還是幾乎沒樣式。我認為只是有些效果出不來，而且那些效果沒出現也不會造成排版錯亂或影響閱讀，但不是完全沒有style，這樣的設計方式應該是目前最適合的，在下一代IE出來前我應該都會照著這個原則做設計，至於下一代IE會是怎麼樣，會對WWW和我的設計理念產生怎樣的影響，那都是到時候在說了。

這篇文章從開始到打完隔了將近一天，而在文章完成時，IE上大部分的顯示問題我都已經修正了，不過有一個小問題還找不到原因。