在線演示

搜索框是 Web 開發最高頻 UI 元素之一，幾乎所有網站/應用為提升體驗都會接入。想設計一個別具一格的搜索框嗎？本教程將教你利用偽元素創建超酷 CSS3 搜索框。開始前可下載源碼或查看在線演示。

HTML 結構：語義化與 HTML5 新屬性

標記極簡易懂：

<form class="cf form-wrapper">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>

關鍵屬性說明：

• placeholder：聚焦前顯示提示文字，聚焦後自動隱藏。
• required：標示為表單必填字段。
• type="search"：HTML5 新增類型，語義更明確。

技巧：<img>、<input> 等無內容元素無法呈現 ::before 等偽元素。解決方案：用 <button type="submit"> 替代 <input type="submit">，既可利用偽元素繪製箭頭，又能保留 Enter 鍵提交功能。

CSS 實現：模組化樣式拆解

清除浮動

.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }

表單容器樣式

.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}

文字輸入框

.form-wrapper input {
width: 330px; height: 20px; padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', Tahoma;
border: 0; background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0; background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
/* Placeholder 樣式跨瀏覽器 */
.form-wrapper input::-webkit-input-placeholder { color: #999; font-weight: normal; font-style: italic; }
.form-wrapper input:-moz-placeholder { color: #999; font-weight: normal; font-style: italic; }
.form-wrapper input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: italic; }

提交按鈕與偽元素箭頭

.form-wrapper button {
overflow: visible; position: relative; float: right;
border: 0; padding: 0; cursor: pointer;
height: 40px; width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', Tahoma;
color: #fff; text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
}
.form-wrapper button:hover { background: #e54040; }
.form-wrapper button:active, .form-wrapper button:focus { background: #c42f2f; outline: 0; }
/* 左側三角箭頭 */
.form-wrapper button:before {
content: ''; position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px; left: -6px;
}
.form-wrapper button:hover:before { border-right-color: #e54040; }
.form-wrapper button:focus:before, .form-wrapper button:active:before { border-right-color: #c42f2f; }
/* Firefox 修正按鈕內部間距 */
.form-wrapper button::-moz-focus-inner { border: 0; padding: 0; }

希望教程對你有啟發，期待反饋交流！

via gbtags | 來源：如何建立一個樣式新穎的CSS3搜索框