css樣式區分input是按鈕還是文字方塊的方法_經驗交流

在設定樣式時怎麼區分input是按鈕還是文字方塊問題的技術調查－把input裡面的東西剔出來

當你看到這個html標籤的時候，你會想到什麼？一個文字方塊？一個按鈕？一個單選框？一個複選框？ ……對，對，對，它們都對。也許你可能想不到，這個小小的input竟然可以創造出10個不同的東西，下面是個列表，看看，哪些是你沒想到的：
文字方塊
密碼框
提交按鈕
重置按鈕
單選框
複選框
普通控制按鈕
隱藏框
圖片按鈕
所以你可能會說，input真是個很棒的東西，竟然這麼有「搞頭”，但是當你真正在專案中試圖為不同的控制設定不同的樣式時，你會發現，input真的可以把“你的頭搞大”。我不知道為什麼當初要給input那麼多身份，但是，他的「N重身份」給網站設計者的確帶來了不少的麻煩。還好，勞動人民是偉大的，解決問題的辦法還是有滴～，雖然它們都有各自致命的缺點Orz… 解放方法大致歸納一下，列表如下（小弟才疏，錯誤遺漏難免，還請各位高人指點）：

1.用css的expression判斷表達式
2.用css中的type選擇器
3.用javascript腳本實作
4.如果你用Microsoft Visual Studio 2005 或後續版本開發項目，恭喜，你還可以使用skin。

下面就來講解一下各個辦法的詳細實作和它們的優缺點。

1：用css的expression判斷表達式
實現程式碼參考：

doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/TR /xhtml1/ DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml" >
頭部>
    標題> diffInput2標題>
    元資料姓名="作者" 內容="JustinYoung"/>
    元 元 名稱="關鍵字" 內容=""/>
  /span>元資料名稱 span >="說明" 內容=" " />
元http-equiv ="Content-Type" 內容="text/html; charset=utf-8"/>
樣式類型 span> span>="text/css">
    輸入
    {
    背景顏色：表達式(this.type=="text"?'#FFC':'');
    }
    樣式>
頭部>

正文>
dl>
dt>這個是正常的文字方塊：dd>輸入類型= “文本” 名稱="">
dt>> span> span>這是正常按鈕：dd >輸入類型 span>="按鈕" 值="我是按鈕">
dl>
正文>
html>

優點：簡單，輕量化缺點：表達式判斷表達式FireFox是不支援的。致命的是只能區分出一個（例如例子中就只能區分出文字文字方塊），不要試圖設定多個，下面的剪貼上面的覆蓋掉Orz ...

2：用css中的型別選擇器
實作參考碼：
p>

doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/TR /xhtml1/ DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml" >
頭部>
    標題> diffInput2標題>
    元資料姓名="作者" 內容="JustinYoung"/>
    元 元 名稱="關鍵字" 內容=""/>
  /span>元資料名稱 span >="說明" 內容=" " />
元http-equiv ="Content-Type" 內容="text/html; charset=utf-8" />
    樣式樣式樣式樣式樣式樣式樣式類型="text/css">
    input[type="text"]
    {
    背景顏色：#FFC;
    }

    輸入[type="password"]
    {
    背景圖：url(BG.gif);
    }

    input[type="submit"]
    {
    背景顏色：藍色;
    顏色：白色;
}
    input[type="reset"]
    {
    背景顏色：海軍藍;
    顏色：白色；
    }

    輸入[ type="radio"]
    {
    /*在 FF 中，不支援某些無線電樣式，例如背景顏色*/
    邊距：10px;
    }

    input[type="checkbox"]
    {
    /*在 FF 中，不支援某些複選框樣式（如背景顏色）*/
邊距：10 像素；
     }

    輸入[type ="button"]
    {
    背景顏色：淺藍;    }
樣式>
頭部>

正文>
dl >
dt>這是正常的文字方塊：dd>>輸入類型="text" span> 名稱="">跨度>
dt>> span> span>這是密碼文字方塊：dd >輸入類型 span>="密碼" 名稱=" ">
dt>這個是提交按鈕：dd>輸入類型= “提交”>
dt>>這是重置按鈕：dd>輸入類型="重置">
dt>phpcngt span style="COLOR: # 000000">這是廣播：dd >輸入類型="收音機" 名稱="ground1" span>> phpcnltcnphpcnltcnphpcnltcnphpcnltcn輸入類型="radio"  名稱="ground1">
dt>> span> span>這是複選框：dd>輸入類型="複選框" 名稱="ground2 ">  span>輸入類型="複選框" 名稱="ground2">
phpcnltcnphpcnltcnphpcnltcnphpcnltcnphpcnltcn span style="COLOR: #800000"> dt>這是普通按鈕：dd>輸入類型="按鈕"  值="我是按鈕">
dl>
正文>
html> p>

優點：簡單，明了，可以分區出各個輸入控制形態。
缺點：類型選擇器，IE6之前的對web標準支援的不太好的瀏覽器不能支援（致命呀Orz…）

3：用javascript腳本實作
實作參考碼：
前台html代碼：

doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/TR /xhtml1/ DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml" >
頭部>
    標題> diffInput標題>
    元資料姓名="作者" 內容="JustinYoung">
    元 元 名稱="關鍵字" 內容="">
    元資料名稱 ="說明"

 內容="">
元http-equiv ="Content-Type" 內容="text/html; charset=utf-8" >
    樣式 類型="text/css">
    輸入{行為:url('css.htc');}
    樣式>
頭部>

正文>
dl>
dt>這個是正常的文字方塊：dd>輸入類型= “文本” 名稱="">
dt>> span> span>這是密碼文字方塊：dd >輸入類型 span>="密碼" 名稱=" ">
dt>這個是提交按鈕：dd>輸入類型= “提交”>
dt>>這是重置按鈕：dd>輸入類型="重置">
dt>phpcngt span style="COLOR: # 000000">這是廣播：dd >輸入類型="收音機" 名稱="ground1" span>> phpcnltcnphpcnltcnphpcnltcnphpcnltcn輸入類型="radio"  名稱="ground1">
dt>> span> span>這是複選框：dd>輸入類型="複選框" 名稱="ground2 ">  span>輸入類型="複選框" 名稱="ground2">
phpcnltcnphpcnltcnphpcnltcnphpcnltcnphpcnltcn span style="COLOR: #800000"> dt>這是普通按鈕：dd>輸入類型="按鈕"  值="我是按鈕">
dl>
正文>
html>

Css.htc程式碼：

腳本語言=javascript >
開關（類型）
{
   span>案例文本' :
    style.backgroundColor="紅色";
    中斷;

    案例 '密碼'：
    style.backgroundImage="url(BG.gif)";
    中斷;

    案例 '提交'：
    style.backgroundColor="藍色";
style.color="白色"；
    中斷;

    案例 '重置':
    style.backgroundColor ="海軍藍";
    style.color="白色"；
    中斷;

    案例 'radio': 
    style.backgroundColor ="亮粉紅色"；
    中斷;

    案例 '複選框': 
    style.backgroundColor ="綠色"；
中斷;

    案例 '按鈕' :
    style.backgroundColor="淺藍色"；
    中斷；

    預設： ;//其他使用預設樣式。
}
腳本>

優點：可以分區出各個輸入控制型態。多種技術的混合使用，滿足「我是高手」的虛榮心
缺點：技術牽扯致命面教廣，因為用js升級處理，所以在js沒有作業之前，各個輸入還是原始狀態，然後突然「變帥」讓你的頁面很奇怪。較之的是FireFox不支援Orz…

4：Microsoft Visual Studio 2005中使用皮膚。
皮膚檔案參考代碼：

%--樣式常見文字方塊-- %>
asp:TextBox runat="伺服器"  樣式= " span>背景顏色:#FFC "phpcngtcnphp /asp:TextBox>
asp:Button runat="伺服器" 風格= 「背景-顏色：紅色」>asp:按鈕>

注意裡面的樣式是用style加上的，而不是用cssClass，道理很簡單，如果用cssClass，前面的再用cssClass就會覆蓋這個cssClass。導致失敗。當然，skin不能單獨使用，還要配合css樣式表。

優點：可以分割出各個控制項形態（注意：skin只能對伺服器端控制項的使用，所以現在已經不是很簡單的輸入標籤了，雖然這些伺服器端控制「打到」前台的時候仍然是輸入控制）。除了css，又被分離了一層，使得樣式的設定能夠有更好的的客製化。其他優點（參考skin的優點）。
缺點：只能對伺服器端控制使用。不是所有的項目都可以使用skin功能Orz…

---

總結：上面的方法，都是有各自的優點和缺點，所以單獨的使用任何一個都不能很好的解決問題。所以應該將多個方法配合一起使用，這樣才能較好的解決問題。但多個方法配合使用就是完美的了嗎？ NO～！它也有致命的缺點——多套方案的維護需要更大的成本！

 

後記：這是一個以IE6為首，非web標準瀏覽器橫掃天下的亂世年代，不知有多少網頁初學者慘死在IE6的詭異解析模式之下，又有多少程式設計師被IE6所奴役，還有無數web設計者在IE6的胯下忍辱偷生。雖然黑暗中我們欣慰的看到FireFox反對暴統的勇者的出現，以及IE7對Web標準越來越好的支持這道曙光。但是黑夜仍舊將會持續很長一段時間。對於web標準一統天下的年代，我們既喜又悲。喜的是，到那個時候，我們做網頁設計和規劃將會如同吃飯般簡單，悲哀的是：如果真的到了那個時候，我們吃飯的飯碗還能那麼重嗎？不過，為了人類社會的進步，拯救地球的科技，發展宇宙的科技文化 -_-b… 我依然期待web標準一統天下的到來。

---

keyword:自動區分各類不同的input樣式,在CSS中如何區分和,利用Javascript實現自動區分各類別不同的input樣式,input,input type,input type file,input type hidden,input file,input.dll,html input,input type image