免費(fèi)AI編程助手
在各種平臺(tái)和各種網(wǎng)頁(yè)的興起中我們可以搜索得到的內(nèi)容也在不斷的增加，那么今天小編就來(lái)和大家分享一個(gè)有關(guān)于：“css搜索框怎么書寫？常用搜索框案例分享！”這個(gè)問(wèn)題的相關(guān)內(nèi)容，希望小編的分享可以讓大家有所收獲！
在我們進(jìn)行實(shí)現(xiàn)搜索框的時(shí)候，我們先來(lái)看看搜索框的效果截圖，如下所示：
那么在看完運(yùn)行之后的截圖呢！我們來(lái)看看我們代碼部分，代碼如下所示：
html部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS搜索框</title>
</head>
<body>
<form method="post" action="search.jsp" name="search">
<div class="search">
<div class="search_box">
<span class="searchicon"></span> <input type="search" name="tname" class="search_input"
id="searchInput" placeholder="請(qǐng)輸入你要搜索物品的名稱">
</div>
<label class="search_label" id="searchText"> <input type="button" value="搜索" class="round_button blue"
onclick="go()">
</label>
</div>
</form>
</body>
</html>
css部分：
.search {background-color: #F0EEEE;
display: flex;
padding: .5rem 1rem;
position: relative;
}
.search_box {
flex: 1;
position: relative;
}
.searchicon {
position: absolute;
height: .5rem;
width: .5rem;
background: transparent;
border: 2px solid #43b3e7;
top: .5rem;
left: .5rem;
border-radius: 100%;
}
.searchicon:after {
content: "";
position: absolute;
background: #43b3e7;
height: 6px;
width: 3px;
bottom: -5px;
right: -3px;
transform: rotate(-45deg);
}
.search_box input {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-appearance: none;
font-size: 1rem;
height: 2.2rem;
width: 100%;
border-radius: 0.3rem;
padding-left: 1.8rem;
}
.search_label {
padding-left: 1rem;
height: 2rem;
line-height: 2rem;
font-size: 1rem;
}
.round_button {
border: 1px solid;
font: bold 12px/25px Arial, sans-serif;
text-align: center;
font-size: 20px;
width: 60px;
height: 35px;
border-radius: 15px;
}
那么以上就是有關(guān)于：“css搜索框怎么書寫？常用搜索框案例分享！”這個(gè)問(wèn)題相關(guān)的案例分享，這個(gè)是我們平常比較經(jīng)常遇到的搜索框類型，當(dāng)然在html中還有更多有關(guān)于這方面的相關(guān)內(nèi)容，更多有關(guān)于HTML這方面的相關(guān)學(xué)習(xí)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解!
