CSS3搜索框是web開發(fā)中常用的元素。它可以使用戶方便地搜索出他們需要的信息。
搜索框通常包括一個輸入框和一個按鈕。使用CSS3,我們可以對這些元素進行自定義樣式。
input[type=search] {
width: 300px;
padding: 10px;
border: none;
background-color: #F5F5F5;
border-radius: 20px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}
button[type=submit] {
background-color: #E67E22;
color: white;
border: none;
padding: 10px 20px;
border-radius: 20px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
input[type=search]:focus {
outline:none;
box-shadow: none;
}
button[type=submit]:hover {
cursor: pointer;
background-color: #D35400;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
這是一個基本的搜索框CSS樣式。我們設(shè)置了輸入框和按鈕的樣式,以及一些鼠標懸停和焦點狀態(tài)下的效果。
我們可以通過更改背景顏色、邊框半徑和陰影等來自定義搜索框的樣式。可以根據(jù)您的需求自定義樣式,使用CSS3來創(chuàng)建美觀的搜索框。