App下載

css搜索框怎么書寫?常用搜索框案例分享!

猿友 2021-07-28 17:22:23 瀏覽數(shù) (2933)
反饋

在各種平臺和各種網(wǎng)頁的興起中我們可以搜索得到的內(nèi)容也在不斷的增加,那么今天小編就來和大家分享一個有關(guān)于:“css搜索框怎么書寫?常用搜索框案例分享!”這個問題的相關(guān)內(nèi)容,希望小編的分享可以讓大家有所收獲!

在我們進(jìn)行實(shí)現(xiàn)搜索框的時候,我們先來看看搜索框的效果截圖,如下所示:

常用搜索框

那么在看完運(yùn)行之后的截圖呢!我們來看看我們代碼部分,代碼如下所示:

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="請輸入你要搜索物品的名稱">

</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搜索框怎么書寫?常用搜索框案例分享!”這個問題相關(guān)的案例分享,這個是我們平常比較經(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í)和了解!


0 人點(diǎn)贊