html如何做成搜索栏,html和css制作一个搜索框,要内容与搜索图标结合,该怎样做?...

最新推荐文章于 2023-05-14 22:12:00 发布

陈以侃

最新推荐文章于 2023-05-14 22:12:00 发布

阅读量550

点赞数

文章标签： html如何做成搜索栏

style type=text/css

.input-box{position: relative;width: 200px;height: 35px;}

.input-box input{width: 200px;height: 35px;padding-left: 10px;padding-right: 32px;}

.input-box button{width:32px;height: 32px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAAXNSR0IArs4c6QAAAhNJREFUOBGllM1V40AMx6WB3JcTlMAtbAdJBUADYB6w1yzbAKEC4Aw8/KAAoALSAeFGCbu3vQcs/pJmBjvmM8x79oxH0s8ajSSmN4ZsF2vEVZeIe1BZiWpjIhlhPebTi5u49+rE07uyWwAi59hPsGmV9I2f8BaflJjbI9S3ZGdjCOgd9hR+TyIHJNynCS/Yo2vdU5nr3MFmv85I6+yxQZmjkhzzycXvpDQ9S1H8oE41hMcDk0m1x6eXR3U9A8fjq6dEFa/zWXldV3prbfcQ5Mrl/LMelhiKqnQhPP0kVPVdV46jrd5LHsH+StzVuL13/GwxvZiEYYq5s1whIKVwURhCnzq+m728uSz/Z9vEghhg6rlaGPk8yzvaZpaCid3jRxrPgjSbZCsaUh+NPE6bM8+M88cBsLin8x9WWrJpz9k2sqAREPiRa1Y9n2d5R9vMMnBwj5lXraK+yDUb2JqZRBY+Qkxyr30r0y+S3QYJgDqoFVe8vFA4jgf1JP/oF1F3gHBiJIZbGdhq3LqWyuVKdjYP3wuLylSHQoU+gURg+kcT+utIf+f00M9mh0Nei1wTo7FP5jRURJ2nLtpoj5jX8LViniqUaBHPA1prH5VoP2iAISTvdNqUXpJd99tDezKOr5525BbyZTwZ3gIngMVPa9/KNFan5rymFG6/flEIzVILnkDfnZvw6td3eQ17hcvuxh/dfAbrGtbYTbXLRQAAAABJRU5ErkJggg==);

background-repeat:no-repeat ;outline: none;border: none;

position: absolute;top: 20%;right: 0%;

}

/style

div class=input-box

input type=text name= value= placeholder=看什么看/

button/button

取消