卡卡網

一個精致漂亮的網頁表單，可讓你的網頁立即變得上了檔次，本文將給你介紹一個精美的CSS表單樣式，并提供源文件下載，真正做到即拿即用。

demodownload

HTML代碼

<fieldset>
  <legend>一些關于你的資料</legend>
  <label for="fullname">姓名：</label>
  <input type="text" id="fullname" />
  <p>性別：</p>
  <p>
    <input type="radio" value="male" id="male" name="gender" />
    <label for="male">男</label>
  </p>
  <p>
    <input type="radio" value="Female" id="female" name="gender" />
    <label for="female">女</label>
  </p>
  <p>你喜歡的語言:</p>
  <p>
    <input type="checkbox" value="CSS3" id="css3" />
    <label for="css3">CSS3</label>
  </p>
  <p>
    <input type="checkbox" value="HTML5" id="html5" />
    <label for="html5">HTML5</label>
  </p>
  <p>
    <input type="checkbox" value="JavaScript" id="javascript" />
    <label for="javascript">JavaScript</label>
  </p>
  <p>
    <input type="checkbox" value="Other" id="other" />
    <label for="other">Other</label>
  </p>
</fieldset>

沒有什么特別之處，使用的是原始控件（checkbox、radio、text）常規的代碼。input加上label控件組合起來排版布局。

CSS代碼

因為代碼分別為checkbox、radio、text等控件專屬，所以總共代碼有點多，CSS樣式文件包含在下載包里。

/* 選中（Checked）樣式 */
p:not(#foo) > input[type=radio]:checked + label  { background-position: 0 -241px; }
p:not(#foo) > input[type=checkbox]:checked + label  { background-position: 0 -81px; }
p:not(#foo) > input[type=checkbox]:hover:checked + label,
p:not(#foo) > input[type=checkbox]:focus:checked + label,
p:not(#foo) > input[type=checkbox]:checked + label:hover,
p:not(#foo) > input[type=checkbox]:focus:checked + label  { background-position: 0 -101px; }
p:not(#foo) > input[type=radio]:hover:checked + label,
p:not(#foo) > input[type=radio]:focus:checked + label,
p:not(#foo) > input[type=radio]:checked + label:hover,
p:not(#foo) > input[type=radio]:focus:checked + label  { background-position: 0 -261px; }

/* 鼠標懸停（hover）和聚焦（focus）樣式 */
p:not(#foo) > input[type=checkbox]:hover + label,
p:not(#foo) > input[type=checkbox]:focus + label,
p:not(#foo) > input[type=checkbox] + label:hover  { background-position: 0 -21px; }
p:not(#foo) > input[type=radio]:hover + label,
p:not(#foo) > input[type=radio]:focus + label,
p:not(#foo) > input[type=radio] + label:hover { background-position: 0 -181px; }

/* 活動（active）樣式 */
p:not(#foo) > input[type=checkbox]:active + label,
p:not(#foo) > input[type=checkbox] + label:hover:active { background-position: 0 -41px; }
p:not(#foo) > input[type=radio]:active + label,
p:not(#foo) > input[type=radio] + label:hover:active { background-position: 0 -201px; }
p:not(#foo) > input[type=checkbox]:active:checked + label,
p:not(#foo) > input[type=checkbox]:checked + label:hover:active { background-position: 0 -121px; }
p:not(#foo) > input[type=radio]:active:checked + label,
p:not(#foo) > input[type=radio]:checked + label:hover:active { background-position: 0 -281px; }

/* 禁用（disabled）樣式 */
p:not(#foo) > input[type=checkbox]:disabled + label,
p:not(#foo) > input[type=checkbox]:hover:disabled + label,
p:not(#foo) > input[type=checkbox]:focus:disabled + label,
p:not(#foo) > input[type=checkbox]:disabled + label:hover,
p:not(#foo) > input[type=checkbox]:disabled + label:hover:active { background-position: 0 -61px; }
p:not(#foo) > input[type=radio]:disabled + label,
p:not(#foo) > input[type=radio]:hover:disabled + label,
p:not(#foo) > input[type=radio]:focus:disabled + label,
p:not(#foo) > input[type=radio]:disabled + label:hover,
p:not(#foo) > input[type=radio]:disabled + label:hover:active { background-position: 0 -221px; }
p:not(#foo) > input[type=checkbox]:disabled:checked + label,
p:not(#foo) > input[type=checkbox]:hover:disabled:checked + label,
p:not(#foo) > input[type=checkbox]:focus:disabled:checked + label,
p:not(#foo) > input[type=checkbox]:disabled:checked + label:hover,
p:not(#foo) > input[type=checkbox]:disabled:checked + label:hover:active { background-position: 0 -141px; }
p:not(#foo) > input[type=radio]:disabled:checked + label,
p:not(#foo) > input[type=radio]:hover:disabled:checked + label,
p:not(#foo) > input[type=radio]:focus:disabled:checked + label,
p:not(#foo) > input[type=radio]:disabled:checked + label:hover,
p:not(#foo) > input[type=radio]:disabled:checked + label:hover:active { background-position: 0 -301px; }

上面為部分代碼，完整代碼在下載包文件里。

使用注意問題

CSS用到一個圖片，使用時應注意路徑正確。

p:not(#foo) > input + label
{
  background: url(gr_custom-inputs.png) 0 -1px no-repeat;
  height: 16px;
}

支持瀏覽器

• Firefox 1.5+
• Opera 9.6+
• Safari 3.2+*
• iPhone/iPod Safari**
• Chrome 4+
• IE9+

相關文章

• 好看的表單input輸入框focus聚焦樣式
• 漂亮的HTML同一頁內可平滑切換的登錄/注冊表單
• 無JS，純HTML+CSS實現的表單驗證
• 兩種方法——在input輸入框里放一個搜索小圖標
• 4個實例演示——美化表單input輸入框CSS樣式
• CSS表單輸入框設計：點擊放大輸入框
• jQuery和CSS3實現有進度條的多步注冊表單

標簽: css  表單  登錄表單  注冊表單