|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
兩種方法——在input輸入框里放一個(gè)搜索小圖標(biāo)
作者:admin 時(shí)間:2022-3-29 20:1:14 瀏覽:假如只有一個(gè)輸入的搜索條件，你還在用一個(gè)單獨(dú)的“搜索”按鈕(button)標(biāo)簽嗎？那種設(shè)計(jì)現(xiàn)在使用的不多了，現(xiàn)在更多的是把搜索圖標(biāo)放在輸入框內(nèi)，這是一個(gè)時(shí)尚的UI設(shè)計(jì)方式。本文將通過3個(gè)實(shí)例，介紹如何在input輸入框里放一個(gè)搜索小圖標(biāo)。
完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輸入框小圖標(biāo)</title>
<style type="text/css">
.box01{
color: #434343;
position: relative;
margin: 20px 20px;
}
.box01 input{
-webkit-appearance: none;
-moz-appearance: none;
appearance:none ;
outline: 0;
width: 270px;
height: 30px;
border:0px solid #fff;
border-radius: 20px;
box-shadow:0 0 5px 2px rgba(0,0,0,0.1);
padding: 0 30px 0 15px;
}
.box01 label{
font-size: 16px;
z-index: 2;
position: absolute;
left: 109px;
top:15%;
color: #b2b2b2;
}
.icon{
display: inline-block;
height: 16px;
width: 16px;
background-image: url(search.png);
background-repeat: no-repeat;
position: absolute;
top: 24%;
left: 290px;
z-index: 2;
}
#tip02{
padding: 0 10px 0 35px;
background-image: url(search.png);
background-repeat: no-repeat;
background-position: 10px 7px;
}
#tip03{
width: 290px;
padding: 0 10px 0 15px;
background-image: url(search.png);
background-repeat: no-repeat;
background-position: 290px 7px;
}
</style>
</head>
<body>
<div class="box01">
<input type="text" id="tip" placeholder="代碼改變世界">
<i class="icon"></i>
</div>
<div class="box01"><input type="text" id="tip02" placeholder="代碼改變世界"></div>
<div class="box01"><input type="text" id="tip03" placeholder="代碼改變世界"></div>
</body>
</html>
代碼解釋
第一種方法是使用<i></i>標(biāo)簽，設(shè)置它對容器的相對位置：position，top，lef。
第二和第三種方法是把小圖標(biāo)當(dāng)作input標(biāo)簽的背景圖片，設(shè)置背景圖片的位置：background-position。
本實(shí)例代碼并不復(fù)雜，關(guān)鍵是弄明白CSS里的background-image(背景圖片)屬性，以及position、background-position等位置數(shù)字的含義。
本實(shí)例需要用到一個(gè)搜索小圖片search.png，你也可以用base64字符串來代替。
您可能對以下文章也感興趣
標(biāo)簽: 表單
相關(guān)文章
x
- 站長推薦
