input框，左边icon,中间输入框,右边button样式
作者:
似朝朝我心 | 来源:发表于
2022-03-01 15:52 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.js"></script>
<title>Document</title>
</head>
<style>
.box{
width: 400px;
height: 40px;
border: 1px solid rebeccapurple;
border-radius: 25px;
display: flex;
}
.icon img {
width: 50px;
height: 40px;
}
.btn {
width: 80px;
height: 40px;
background:rebeccapurple;
border-radius: 25px;
text-align: center;
line-height: 40px;
color: white;
cursor: pointer;
}
.bar {
width: 270px;
height: 40px;
}
.bar input {
border: none;
outline: none;
width: 260px;
height: 35px;
}
</style>
<body>
<div class="box">
<div class="icon"><img src="sousuo.svg" alt=""></div>
<div class="bar">
<input type="text" v-model="input">
</div>
<div class="btn">搜索</div>
</div>
<script type="text/javascript">
const app = new Vue({
el:".box",
data:{
input:'',
}
})
</script>
</body>
</html>
本文标题：input框，左边icon,中间输入框,右边button样式
本文链接：https://www.haomeiwen.com/subject/zxadrrtx.html
网友评论