CSS 如何将搜索按钮做到框里？

Posted 2023-05-07

就像这样 需要将右边放大镜和边框一起切 左边的边框单独切作为文本框背景吗？

你好！布局建议使用div里边放input和button的方式
<div style="border:1px solid #cccccc;width:150px;height:25px;">
<input type="text" style="border:0;margin-left:5px;width:110px;height:25px;line-height:25px;" />
<input type="button" value="" style="background:url(searchBtn.gif) no-repeat center center;width:15px;height:15px;margin:5px;" />
</div>
以上为大概思路，具体数值还需根据实际情况进行调整！ 参考技术A 通常的做法
1、输入框边框隐藏
2、按钮与输入框位置调整
3、外面加一个层级标签加边框 参考技术B 提问者你理解错误了，边框是容器div的边框，文本框的边框是没有的。不然文本输入长了不就被按钮遮住了么？追问

文本框会拉长遮住按钮吗?那这样就肯定不行，不过我吧放大镜切出来作为按钮的背景了。

追答

不会，是被按钮遮住文字。按照我的方法做就可以了，你可以参考一下淘宝之类的商城做法，没有人像你这样做的。

参考技术C 框的position:relative，按钮的position:absolute;right:0;top:0，然后根据你的实际情况微调就行 参考技术D 直接文本框把搜索按钮做背景图片，或者定位上去。

JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

JS:

document.getElementById("input对象的ID").addEventListener(\'input\',function(){
　　　　console.log("aaaaa");
});

JQ:

$("input对象").on("input  propertychange",function(){
　　　console.log($(this).val());
})；

 　　这个也适用与textarea标签的内容的及时监听，只需要把对象名改变就行了，其它不用变。

MUI 清除按钮的点击的监听：

mui(\'input对象\')[0].addEventListener(\'focus\', function(){
　　　　　mui(".mui-icon-clear")[0].addEventListener(\'tap\',function(){
　　　　　　　console.log("aaaaa");
　　　　 });
})

　　说明：因为MUI搜索框里自带的清除按钮是当input框focus，即input获取焦点的时候才出现的，如果不要input的focus监听事件，那么清除按钮的点击事件是不会监听到的。

　　　　　我觉得是因为清除按钮，下面的那个span是文档加载完之后，MUI的js加载进去的，所以当不先监听input的focus事件的时候，清除按钮的监听事件是找不到那个DOM对象的，所以就会报这样的错误。