css input加图片

css input加图片,怎么把图片变小一点呀?这样太大了。另外怎么给搜索图片加点击事件?

img


<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框入焦和失焦,纯css改变样式
  • 除此之外, 这篇博客: 表格的css属性中的 input类型 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  •      <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”;