熟悉HTML的人應該都知道input type在網頁裡十分常見,
不論是按鈕或是輸入方塊,都可以利用type=button或type=text來控制。

為了讓HTML網頁更加多采多姿,通常以CSS來指定網頁上各類元件的樣式。
在一般的CSS指定中,大多透過指定tag或id,或是以class的方式定之。
例如:
  div { width: 100px; }   /* <div></div> */
  #my_id { color: #0000FF; }   /* <div id="my_id"></div> */
  .my_class { background: #FFFFCC; }   /* <div class="my_class"></div> */

但是對於input來說就棘手了! 這麼多種的type總不可能每種都能用。
如果以針對tag的方式定義,那如checkbox或radio就不適用。
要使用class或id也很麻煩,必須一個一個指定。

有沒有一種寫法,可以分別定義所有的input
分別對應type="text"或type="checkbox"等等的樣式呢?

有!

CSS的定義中,有selector的定義,可以幫助我們完成這個工作。
但是須注意的是,IE6不支援這個屬性(IE7似乎已經支援),Firefox和Opera等則沒問題。
    input[type="text"] {
        border:1px solid red;
    }

另外也可使用JavaScript來指定樣式。
參考Styling All input type="text" webpage controls
input的CSS樣式,有沒有分別對應type=text,submit,chekbox...的寫法?

創作者介紹
創作者 DolphinWing 的頭像
DolphinWing

海豚看世界

DolphinWing 發表在 痞客邦 留言(0) 人氣()