css input加图片

Question

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
    }

Answer 1

要添加点击事件，就需要使用<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('响应');
}