新技能傳授-嗶嗶嗶嗶
search類型搜索框,設計師常常會設計一個叉叉圖標,表示用戶點之久可以清除輸入的內容。比方說這個:
這是不錯的體驗!
當前現代瀏覽器中,Chrome瀏覽器下type=search的輸入框會有清除按鈕的動態呈現,不過搜索input框尺寸不太好控制(padding無視);FireFox瀏覽器貌似任何類型的輸入框都無動于衷;IE10+瀏覽器貌似任何輸入框都會出現清除按鈕,但是長得略微粗糙了點,設計師同學接受不了。
貌似不和諧了,咋辦?傳授個新技能,借助HTML以及CSS,來模擬清除按鈕可動態呈現的搜索框。
如下CSS:
新聞熱點
疑難解答