CSS3搜索框是web開發中常用的元素。它可以使用戶方便地搜索出他們需要的信息。
搜索框通常包括一個輸入框和一個按鈕。使用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樣式。我們設置了輸入框和按鈕的樣式,以及一些鼠標懸停和焦點狀態下的效果。
我們可以通過更改背景顏色、邊框半徑和陰影等來自定義搜索框的樣式??梢愿鶕男枨笞远x樣式,使用CSS3來創建美觀的搜索框。