隨著現(xiàn)代網(wǎng)頁設(shè)計(jì)越來越趨向扁平化，輸入框也不例外。CSS提供了很多實(shí)現(xiàn)扁平化輸入框的方法，下面將介紹一些常用的技術(shù)。

/* 純CSS實(shí)現(xiàn)扁平輸入框 */
input[type="text"],textarea {
display: inline-block;
border: none;
border-radius: 5px;
background-color: #f5f5f5;
padding: 10px;
font-size: 16px;
color: #333;
transition: all .3s ease;
}
input[type="text"]:focus,textarea:focus {
outline: none;
box-shadow: 0 0 5px #999;
background-color: #fff;
}
/* 使用Font Awesome實(shí)現(xiàn)帶圖標(biāo)的扁平輸入框 */
.input-group input[type="text"],.input-group textarea {
display: inline-block;
border: none;
border-radius: 5px;
background-color: #f5f5f5;
padding: 10px;
font-size: 16px;
color: #333;
transition: all .3s ease;
}
.input-group input[type="text"]:focus,.input-group textarea:focus {
outline: none;
box-shadow: 0 0 5px #999;
background-color: #fff;
}
.input-group-addon {
background-color: #f5f5f5;
border: none;
border-radius: 5px;
font-size: 16px;
color: #333;
padding: 10px;
cursor: pointer;
transition: all .3s ease;
}
.input-group-addon:hover {
background-color: #ccc;
}
/* 使用Bootstrap實(shí)現(xiàn)帶邊框和圓角的扁平輸入框 */
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}
.form-control:focus {
border: 1px solid #66afe9;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}

以上是一些常用的CSS技術(shù)來實(shí)現(xiàn)扁平化輸入框，通過簡單的CSS代碼，我們可以制作出符合自己網(wǎng)頁風(fēng)格的輸入框。