html中有相关的输入框标签控件,可以使用html+css做出自己想要的效果,也可以使用一些样式框架中的组件,比如elementUI,layUI,bootstrap等等。下面使用html+css写一个搜做框效果,经供参考。
1、html代码
<input class="user-input" type="text" name="search" placeholder="请输入内容"> <input class="user-btn" type="button" value="搜索">
2、css代码
<style> .user-input { width: 400px; height: 40px; border: 2px solid blue; border-radius: 5px; box-sizing: border-box; outline: none; text-indent: 10px; } .user-btn { width: 100px; height: 40px; border: none; border-radius: 5px; background: blue; vertical-align: middle; outline: none; color: white; font-size: 20px; } </style>
3、效果展示
![ae99782efc9878cbfa7f24563060998e.png](https://i-blog.csdnimg.cn/blog_migrate/38927d59a1518fad8c0d2cbf0abd97bb.png)