使用CSS可以實現各種各樣的效果,包括寫出一份和百度搜索一樣的搜索框。想要得到類似效果,可以按照下面的代碼來實現:
/*HTML*/
<form>
<input type="text" placeholder="搜索百度">
</form>
/*CSS*/
form{
display: inline-block;
position: relative;
}
input[type="text"]{
box-sizing: border-box;
display: block;
width: 300px;
height: 30px;
padding: 5px;
border-radius: 15px;
border: none;
box-shadow: 1px 2px #ccc;
font-size: 16px;
}
input[type="text"]:focus{
outline: none;
box-shadow: 1px 2px #57c7d4;
}
input[type="text"]::placeholder{
color: #ccc;
font-size: 16px;
}
上面的代碼中,使用了input元素來創建輸入框,設置了其類型為text,并設置了其placeholder屬性為“搜索百度”,即輸入框中的默認提示文字。在CSS中,首先設置了外層容器的樣式為inline-block,使其在文本流中呈現。接著對text類型的輸入框設置樣式,包括盒模型、圓角、陰影、字號等屬性。在輸入框被聚焦時,使用偽類選擇器:focus給輸入框加上藍色陰影,并將outline屬性設為空,以去掉默認的邊框樣式。最后,設置placeholder的顏色和字號樣式。