css input加图片,怎么把图片变小一点呀?这样太大了。另外怎么给搜索图片加点击事件?
<view style="margin-top: 20px;">
<input class="homtInput" placeholder="搜你想要的..." />
</view>
.homtInput{
width: 90%;
height: 35px;
border: 2px solid #75b6dc;
border-radius: 30px;
margin-left: 5%;
text-indent: 20px;
padding-right:20px;
background:url("../../static/tab/ss.png") no-repeat scroll right center transparent
}
要添加点击事件,就需要使用<img>元素,而不能使用背景图片,使用width、height控制img的大小,使用相对定位将img放到input的背景位置。
给一个参考:
<view style="margin-top: 20px;">
<div class="container">
<input class="homtInput" placeholder="搜你想要的..." />
<img src="../../static/tab/ss.png" alt="bg'/ onClick={clickImg}>
</div>
</view>
.container {
width: 90%;
heigth: 35px;
position:relative;
}
.container img {
width:auto;
height: 35px;
position: absolute;
right: 1px;
z-index: 9;
}
.homtInput{
width: 100%;
height: 35px;
border: 2px solid #75b6dc;
border-radius: 30px;
margin-left: 5%;
text-indent: 20px;
padding-right:20px;
}
// javascript 部分
clickImg(){
console.log('响应');
}
用background-size:100% 100%或者background-size:cover试下
调整一下background-size; 试试看,比如 background-size: 10px 15px;
加点击事件不能用背景图,直接 image 标签绝对定位不就可以了
<input type="?">
1)输入框:单行文本输入框,文本框
type=“text”
2)密码框:加密框
type="password"
3)提示文本
placeholder,和value的区别:value占位置才能显示,但是placeholder纯提示文本
4)单选框
应用场景:单选题
<input type="radio">男
<input type="radio">女
单选框默认存在问题:共选问题,通过一个name属性来解决,name取值一致
<input type="radio" name="sex">男
<input type="radio" name="sex">女
默认的选中:checked
<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
5)文本上传
文件上传:type=“file”;
6)隐藏域
隐藏文本上传:type=“hidden”
通过隐藏域上传的东西,用户是看不见的。
7)按钮类
提交按钮=type=“submit”;
重置按钮=type=“reset”;
普通按钮=======type=“button”;