MozTW 討論區 https://forum.moztw.org/ |
|
[CSS]radio仿單選select https://forum.moztw.org/viewtopic.php?f=13&t=6039 |
第 1 頁 (共 1 頁) |
發表人: | othree [ 2005-01-20, 01:02 ] |
文章主題 : | [CSS]radio仿單選select |
http://xd.othree.net/tmp/radio2select.html 詳細說明等我精神好點再說,這是昨天想到兩個點子的其中一個。缺點:只能用hover,沒辦法做成滑鼠點一下,如果表單在頁面最下方,選項會跑到頁面外(會需要往下scroll)。回想弄這個的原因也是因為Sselect的style可變動的地方有限。 另外這個頁面有用-moz-border-radius這個mozilla專用的style,還有IE沒效果(不過radio會正常列出)。 |
發表人: | BobChao [ 2005-01-20, 01:25 ] |
文章主題 : | |
天啊 有沒有這麼神啊 多來幾次就可以幫你加上 CSS 創意大師的稱號了 ![]() |
發表人: | 訪客 [ 2005-01-21, 15:03 ] |
文章主題 : | |
有bug啊,按幾次Tab看看~ |
發表人: | othree [ 2005-01-21, 22:56 ] |
文章主題 : | |
Anonymous 寫: 有bug啊,按幾次Tab看看~
那是故意的,我還會加上after和before^^b,這是為了確保親和力好讓使用者知道你游標移到哪個選項:P。 |
發表人: | othree [ 2005-01-21, 22:59 ] |
文章主題 : | |
BobChao 寫: 天啊 有沒有這麼神啊
多來幾次就可以幫你加上 CSS 創意大師的稱號了 ![]() 我沒這麼神啦,後來想到還有點問題,就是它現在不是inline物件了@_@ |
發表人: | othree [ 2005-01-24, 22:39 ] |
文章主題 : | |
http://xd.othree.net/tmp/radio2select.html 應該是短期之內的定版了,雖然和預想的不太一樣,不過還是可以勉強一用,現在主要問題是opera不支援:checked和opacity,所以會變很慘(IE的話只是把radio列出來,反而沒問題),教學還是會寫,這次用到很tricky的技巧XD。 |
發表人: | othree [ 2005-01-26, 15:52 ] |
文章主題 : | |
一樣,更新的話以我網站上的為主:P。 ![]() 為什麼要用radio模仿select呢,因為select標籤也是沒辦法完全依照自己希望設定樣式的物件之一,舉例來說,他的邊框我就沒辦法設定。因此我一直在尋找方法來處理這個問題,直到想到之前的:checked應用的方法之後,才似乎出現了一絲署光,不過一直拖到最近才有座法的構想,沒想到實際做起來還是遇到不少問題,但還是做出了一個可以用的版本,雖然還有些問題。 接著我們來看看這是怎麼做到的,為了模仿select標籤,我們的要求有幾個:
首先簡單的把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會亂掉,不過因為用了一些蠻有趣的技巧,所以還是把它寫出來了,延伸的用法,可以看看應用。 |
發表人: | 訪客 [ 2005-01-26, 16:14 ] |
文章主題 : | |
是很有創意啦, 我也相當佩服作者長時間弄出來的成果。 但我實在不明白, 為什麼不用XBL來做? 代碼: margin: -100%;
不同CSS的組合確能做到無限的可能性, 但上面的CSS對於普通人來說可謂相當難理解... 有點遮去了CSS的易讀性。 加上現實各家瀏覽器對CSS的實做方式不一, 在未經多個瀏覽器的測試下, 很容易產生出很多未預期的效果啊。 |
發表人: | othree [ 2005-01-26, 16:24 ] |
文章主題 : | |
Anonymous 寫: 是很有創意啦, 我也相當佩服作者長時間弄出來的成果。
但我實在不明白, 為什麼不用XBL來做? 代碼: margin: -100%; 不同CSS的組合確能做到無限的可能性, 但上面的CSS對於普通人來說可謂相當難理解... 有點遮去了CSS的易讀性。 加上現實各家瀏覽器對CSS的實做方式不一, 在未經多個瀏覽器的測試下, 很容易產生出很多未預期的效果啊。 我期待各家瀏覽器都能支援標準的時候來到,所以還是用HTML+CSS,而且我都是想辦法設計成只要引入外部樣式,HTML部分只要修改一點就可以有效果出來(不過這個case有不少缺點,所以應該不會有這東西:P,寫說明是希望有人在了解過程中想到更多靈感),而這個case我主要不滿的就是要做到兩層span標籤,本來我是希望只要一個span把選項包起來加上class就可以,這樣其他人要套用也是很簡單,麻煩的反而會是用radio和label把選項列出來。 大部分人會覺得複雜難懂也是我意料之中^^,這不算是CSS教學,我比較傾向當成範例。至於未預期的效果,Opera不支援:checked、opacity,所以確實很慘,IE的話則是在選項太多會爆XD(最後一個應用的範例用IE看就知道了),相較之下之前單純使用:checked虛擬選擇器的用法要實用多了。 |
發表人: | tangalong [ 2006-03-04, 20:36 ] |
文章主題 : | 你这技术有很大的弊端 |
应尽量做成一个对象,有整体性, 如果你这东西跟select混着用就肯定会出问题, 如有frame/iframe,你这东西肯定不管用, 你定义的css不通用,如ie就不管用, 我觉得目标要清晰:功能能跟select媲美就行,美观上一定要比select强很多,能用css自定义每个细节的样式 ie的select控件做的简直是太烂了,设计师绝对是个卖菜的主, 若感兴趣,可以一块探讨一下, |
第 1 頁 (共 1 頁) | 所有顯示的時間為 UTC + 8 小時 |
Powered by phpBB® Forum Software © phpBB Group https://www.phpbb.com/ |