卡卡網(wǎng)

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

demodownload

HTML代碼

<fieldset>
  <legend>一些關(guān)于你的資料</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）常規(guī)的代碼。input加上label控件組合起來排版布局。

CSS代碼

因?yàn)榇a分別為checkbox、radio、text等控件專屬，所以總共代碼有點(diǎn)多，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; }

/* 鼠標(biāo)懸停（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; }

/* 活動(dòng)（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用到一個(gè)圖片，使用時(shí)應(yīng)注意路徑正確。

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+

相關(guān)文章

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

標(biāo)簽: css  表單  登錄表單  注冊(cè)表單