CSS搜索框默認(rèn)值功能是界面設(shè)計(jì)中經(jīng)常使用的一種技巧,它讓搜索框在未輸入內(nèi)容時(shí)顯示一些提示文字,提高用戶體驗(yàn)。
/* 定義搜索框默認(rèn)樣式 */ input[type="text"]::-webkit-input-placeholder { color: #999; font-style: italic; } input[type="text"]::-moz-placeholder { color: #999; font-style: italic; } input[type="text"]:-moz-placeholder { color: #999; font-style: italic; } input[type="text"]:-ms-input-placeholder { color: #999; font-style: italic; } /* 定義搜索框默認(rèn)值 */
在上面的代碼中,我們使用CSS的偽元素選擇器::-webkit-input-placeholder、::-moz-placeholder、:-moz-placeholder和:-ms-input-placeholder,分別定義了Webkit、Firefox和IE瀏覽器下的搜索框默認(rèn)樣式。其中,我們將顏色設(shè)置為#999,字體樣式設(shè)置為italic,讓默認(rèn)文字呈現(xiàn)柔和的灰色,并使用斜體效果凸顯提示意義。
而在Input標(biāo)簽中,我們使用了placeholder屬性,將“請(qǐng)輸入關(guān)鍵字...”文字作為搜索框默認(rèn)值。當(dāng)用戶開始輸入內(nèi)容后,該文字會(huì)自動(dòng)消失,讓用戶心無旁騖地輸入關(guān)鍵字。
默認(rèn)值的設(shè)計(jì)需要注意合理性和實(shí)用性,避免過多干擾用戶輸入,也要注意和整體設(shè)計(jì)的協(xié)調(diào)性,以達(dá)到更好的使用體驗(yàn)。