僅供學(xué)習(xí)，轉(zhuǎn)載請(qǐng)注明出處

簡(jiǎn)介

在設(shè)置input的適合，你會(huì)覺(jué)得默認(rèn)的input樣式并不好看。那么該怎么優(yōu)化呢？

默認(rèn)的input

可以從上面看出，這個(gè)樣式的確不好看。

優(yōu)化input樣式

設(shè)置 outline-style: none ; 取消外邊框

可以從上圖看出，在點(diǎn)擊輸入input的適合，框邊就顯示比較粗的邊框，那么怎么將這個(gè)樣式取消呢？

input{
    outline-style: none ;
}

設(shè)置好了樣式之后，再在瀏覽器上面看看，如下：

border 邊框優(yōu)化

input的邊框跟div的邊框一樣，都是可以用border來(lái)進(jìn)行調(diào)整。

例如：取消邊框樣式 border: 0px;

input{
    outline-style: none ;
    border: 0px;
}

瀏覽器展示如下：

設(shè)置灰色 1px的邊框 border: 1px solid #ccc;

input{
    outline-style: none ;
    border: 1px solid #ccc; 
}

瀏覽器展示如下：

設(shè)置邊框圓角效果

設(shè)置 border-radius: 3px;

input{
    outline-style: none ;
    border: 1px solid #ccc; 
    border-radius: 3px;
}

瀏覽器展示如下：

那么能不能調(diào)整input的大小呢？

設(shè)置input的大小

設(shè)置高度，如下：
padding: 7px 0px;
設(shè)置輸入框高度，也可以用height，但是用height的話(huà)，輸入框的光標(biāo)會(huì)置于頂部，還要設(shè)置其他樣式去固定，而且還不一定會(huì)兼容很好。

瀏覽器顯示如下：

設(shè)置寬度，如下：
width: 620px;
因?yàn)閕nput也是塊元素，直接設(shè)置寬度即可，效果如下：

設(shè)置輸入的字體大小

當(dāng)前的字體有些小，那么可以調(diào)整一下。

設(shè)置字體大小 font-size: 24px; ，優(yōu)化如下：

input{
    outline-style: none ;
    border: 1px solid #ccc; 
    border-radius: 3px;
    padding: 14px 14px;
    width: 620px;
    font-size: 24px;
}

設(shè)置字體微軟雅黑font-family: "Microsoft soft";，如下：

input{
    outline-style: none ;
    border: 1px solid #ccc; 
    border-radius: 3px;
    padding: 14px 14px;
    width: 620px;
    font-size: 24px;
    font-family: "Microsoft soft";
}

其中上面使用了padding 來(lái)調(diào)整輸入框的高度，而字體太大也就相應(yīng)影響了輸入框高度，再簡(jiǎn)單優(yōu)化一下，如下：

input{
    outline-style: none ;
    border: 1px solid #ccc; 
    border-radius: 3px;
    padding: 13px 14px;
    width: 620px;
    font-size: 14px;
    font-weight: 700;
    font-family: "Microsoft soft";
}

最后再來(lái)看看，給輸入框設(shè)置默認(rèn)文字。

設(shè)置默認(rèn)內(nèi)容 placeholder

設(shè)置輸入框的默認(rèn)內(nèi)容，使用placeholder屬性。代碼如下：

<input type="text" placeholder="輸入框默認(rèn)內(nèi)容">

顯示效果如下：

設(shè)置輸入框點(diǎn)擊發(fā)光效果

input:focus{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

效果如下：

相關(guān)美化文獻(xiàn)

html頁(yè)面輸入框input的美化

CSS去除Input的邊框樣式和陰影