CSS可以非常簡便的幫助我們實現輸入框的樣式。下面分享一些經典的實現方法。

/* 1. 帶邊框的輸入框 */
input {
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
}
/* 2. 帶背景色的輸入框 */
input {
border: none;
background-color: #f2f2f2;
border-radius: 5px;
padding: 5px;
}
/* 3. 帶陰影的輸入框 */
input {
border: none;
box-shadow: 0px 0px 5px #ccc;
border-radius: 5px;
padding: 5px;
}
/* 4. 帶圖標的輸入框 */
.input-with-icon {
position: relative;
}
i {
position: absolute;
left: 10px;
top: 10px;
}
input {
border: none;
padding: 10px 10px 10px 30px;
}
<div class="input-with-icon">
<i class="fa fa-search"></i>
<input type="text" placeholder="Search...">
</div>
/* 5. 帶動畫的輸入框 */
input {
border: none;
border-bottom: 2px solid #ccc;
padding: 5px;
transition: 0.4s;
}
input:focus {
border-bottom: 2px solid #f2f2f2;
}

除了以上實現方法，還有很多其他的樣式可以使用。我們可以通過學習CSS不同屬性的使用方法，來實現豐富多樣的輸入框樣式。