body { text-align:center; } input[type=search] { border:1px solid #A9A9A9; border-radius:5px; padding:5px 0 5px 8px; } ::-webkit-input-placeholder { /* WebKit browsers */ color:#3385FF; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#3385FF; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#3385FF; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color:#3385FF; } input[type=search]:hover { border:1px solid #00C5FF; } input[type=search]:focus { border:1px solid #3385FF; box-shadow:0 0 2px #3385FF; }
一个带有提示信息的搜索框,当鼠标经过时,边框会变色,当搜索框选中时,边框会出现阴影。