卡卡網(wǎng)

在網(wǎng)站或APP等UI設(shè)計(jì)中，表單的使用頻率非常之高，它的設(shè)計(jì)也就顯得尤為重要，一張漂亮的表單肯定會(huì)比一張平庸的表單更能吸引住用戶，用戶用得舒適，他停留的時(shí)間也就自然會(huì)更長(zhǎng)，比如這張讓人眼前一亮的純CSS3實(shí)現(xiàn)的注冊(cè)表單。

在本文中，將通過(guò)4個(gè)實(shí)例，演示如何美化表單input輸入框的CSS樣式。

1. 扁平表單
2. 添加陰影和圓角
3. 半透明效果
4. 設(shè)置輸入框提示文字樣式

1、扁平表單

這種扁平表單沒有過(guò)多的設(shè)計(jì)元素，它只是把默認(rèn)的input屬性稍微加工了一下，比如把邊框?qū)挾仍O(shè)為0，加上一個(gè)邊距讓文字縮進(jìn)一點(diǎn)，這樣看起來(lái)文字沒那么擁擠。

demodownload

表單主要CSS：

input{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance:none ;
  outline: 0;
  padding:0 8px;
}

2、添加陰影和圓角

下面我們加入一點(diǎn)設(shè)計(jì)元素，使用border-shadow添加陰影，和使用border-radius添加圓角。

于是，表單立即變得立體起來(lái)，變得更加時(shí)尚了，而圓潤(rùn)平滑的邊角給人一種柔和的印象，表單總體給人一種更加舒適的感覺。

demodownload

表單主要CSS：

input{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance:none ;
  outline: 0;
  padding:0 8px;
}
input{
  box-shadow: 0 2px 10px 2px #999999;
  border-radius:30px;
}

這里說(shuō)一下box-shadow。

box-shadow 向框添加一個(gè)或多個(gè)陰影。

語(yǔ)法：

box-shadow: h-shadow v-shadow blur spread color inset;

注釋：

box-shadow 屬性由逗號(hào)分隔陰影列表，每個(gè)陰影由 2-4 個(gè)長(zhǎng)度值、可選的顏色值以及可選的 inset 關(guān)鍵詞來(lái)規(guī)定。省略長(zhǎng)度的值是 0。

3、半透明效果

利用 background: rgba(); 來(lái)設(shè)計(jì)一些半透明的輸入框，這種時(shí)候通常會(huì)搭配一些稍微豐富一點(diǎn)的背景色。

半透明效果會(huì)讓表單變得更加質(zhì)感。

demodownload

表單主要CSS：

input {
    appearance: none;
    text-align: center;
    height: 36px;
    width: 248px;
    border-radius: 15px;
    border: 0px solid #fff;
    padding: 0 8px;
    outline: 0;
    letter-spacing: 1px;
    color: #fff;
    font-weight: 600;
    background: rgba(45,45,45,.10);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
    text-shadow: 0 1px 2px rgba(0,0,0,.1);
    -o-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s;
    -ms-transition: all .2s;
}
input {
    box-shadow: 0 0 5px 4px rgba(0, 0, 0,0.1);
}

在設(shè)計(jì)透明效果時(shí)，充分利用background、box-shadow的屬性搭配，設(shè)計(jì)出滿意的效果。

上述示例background的屬性值rgba(45,45,45,.10); 里，.10是表示透明度，前面3個(gè)數(shù)字(45,45,45)是用來(lái)表示rgb顏色。

4、設(shè)置輸入框提示文字樣式

輸入框使用了placeholder顯示提示文字，它的文字樣式是可以修改的。

提示文字的顏色透明度一般比較低，顏色比較灰淺。

demodownload

placeholder的CSS：

input::-webkit-input-placeholder {
  color: #c1c1c1;
}
input:-moz-placeholder {
  color: #c1c1c1;
}
input::-moz-placeholder {
  color: #c1c1c1;
}
input:-ms-input-placeholder {
  color: #c1c1c1;
}

總結(jié)

本文通過(guò)4個(gè)實(shí)例，介紹了如何使用CSS美化表單input輸入框樣式。通過(guò)美化過(guò)的表單，給人印象會(huì)更加深刻，給人的好感度會(huì)倍增。所以在UI設(shè)計(jì)時(shí)，表單的美化是不容忽視的。

您可能對(duì)以下文章也感興趣

• CSS表單輸入框設(shè)計(jì)：點(diǎn)擊放大輸入框
• jQuery和CSS3實(shí)現(xiàn)有進(jìn)度條的多步注冊(cè)表單
• CSS表單輸入框設(shè)計(jì)：點(diǎn)擊放大輸入框
• 純CSS：點(diǎn)擊輸入框時(shí)，標(biāo)簽（占位符）浮動(dòng)可見
• 純css3實(shí)現(xiàn)漂亮的用戶注冊(cè)表單
• CSS3+jQuery實(shí)現(xiàn)登錄表單與注冊(cè)表單同頁(yè)平滑切換
• 漂亮的注冊(cè)和登錄切換表單【html5和css3實(shí)現(xiàn)】

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