Question

想利用HTML，CSS制作如下图搜索框怎么制作？

在HTML通过css外部式实现这个搜索框怎么写？希望能简单讲解一下，是不插入图片的那种。可以提供代码，或者详细讲一下用什么语句，方式等等，截图也可以。谢谢。

Answer 1

<style>

.boxt{

/*width: 200px;*/

display: inline-block;

height: 35px;

overflow: auto;

border-radius: 35px;

border: 1px solid #3D9970;

}

.boxt input{

padding: 0px 10px;

float: left;

height: 33px;

width: 130px;

line-height: 33px;

outline: none;

border: none;

}

.boxt button{

float: left;

border: none;

line-height: 31px;

background: #3D9970;

color: #fff;

}

</style>

<div class="boxt">

<input type="text" placeholder="请输入...." />

<button>搜索</button>

</div>

追问

这些所有设置，不可以放在一个css中吗？

追答

可以啊，你把里面的放进去就可以了

追问

感谢。