去除input[type=search]后面的小x

最新推荐文章于 2025-07-01 12:01:49 发布
最新推荐文章于 2025-07-01 12:01:49 发布
阅读量5.7k 收藏 4
点赞数 2
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_16570607/article/details/82585039
本文介绍如何使用 CSS3 的新增属性来控制 input[type=search] 中的搜索取消按钮样式。通过 -webkit-appearance 属性设置为 none 来隐藏默认的搜索取消按钮。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用css3新增的属性来控制input[type=search]
input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;
}
qq_16570607
关注
Element-UI el-input组件type=“number“的样式修改
Jana Jing的分享
07-14 6446
el-input组件
html5 里面的type=”search“ ,h5版，点击手机键盘上的 ‘搜索”，”前往“等按钮，进行搜索
欢迎来到我的频道~
10-12 2846
效果图： 使用type=”search " 会得到如下的效果。 （PC端的效果）： （手机端的效果）：点击”搜索“的时候，可以进行查询。 去掉type=”search“ 默认带的x号： input[type="search"]::-webkit-search-cancel-button { display: none; } 敲手机上的 ”回车“，”搜索“...
input 输入框type='search'去掉×
weixin_30596165的博客
05-03 920
input输入时，为了让ios键盘的前进会变为搜索，设置input的type='search'但是安卓输入框后面会出现个小叉，实际不需要这个× 解决办法： input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none; } 转载于:https://www.cnb...
input框唤出键盘展示搜索按钮并去掉默认的x
zhliwang的博客
04-01 1047
input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none; }
html 中input里面的type是什么作用
2401_83708850的博客
07-01 649
form>标签是 HTML 表单的基础，不可或缺。如果你需要实现用户注册功能，必须保留<form>标签，并确保其action和method属性配置正确。如果只是临时测试界面效果，可以暂时移除，但最终上线时必须恢复。method属性有啥作用。
IE11-隐藏input后的X
weixin_34375233的博客
03-14 294
百度：ie输入框x 通过过CSS虚拟元素(::-ms-clear、::-ms-reveal)禁用X和眼睛图标， input::-ms-clear{display:none;} 转载于:https://www.cnblogs.com/wangxuehao/p/6549999.html
ie 浏览器input框会出现小叉叉的问题
依然范特西
05-18 8304
隐藏小叉叉：    IE10+/** 文本输入框的 X **/input::-ms-clear{display: none;} /** 密码输入框的 X **/input::-ms-reveal{display: none;}IE9- 将input框的宽度设为82px以下就没有了...
vue去除input在360兼容模式下删除图标
qq_29384639的博客
10-10 333
问题： 360兼容模式下/ie下，input自动出现删除图标 解决： 添加css代码清除 ::-ms-clear{display: none;} ::-ms-reveal{display: none;}
html，去除input type=search自带的清除按钮
07-12
你可以通过CSS样式来隐藏input type="search"自带的清除按钮。可以使用以下代码来实现： ...<input type="search" id="mySearch" name="mySearch" class="no-clear...这样就能去除input type="search"自带的清除按钮了。
<div> <label>レビューア：</label> <input type="text" v-model="searchData.checkMember" placeholder="输入指摘者" class="search-input"/> </div> vue去空格
最新发布
07-29
<input v-model="inputValue" @input="removeSpaces" type="text"> ``` ```javascript methods: { removeSpaces() { this.inputValue = this.inputValue.replace(/\s+/g, ''); } } ``` 注意：如果用户...
<div class="Search"> <label for="search"> <input type="text" id="myinput" placeholder="请输入关键字" required > </label> </div>这段代码css中如何写让图片作为输入框的背景
06-05
.Search input[type="text"] { background-image: url("path/to/image.jpg"); background-size: cover; background-position: center bottom; background-repeat: no-repeat; border: none; height: 50px; ...
uniapp中使用vant，van-search组件多了一个小叉
yonghuid123453的博客
05-19 321
:v-deep{important;
如何去掉input[type=search]鼠标点击时的蓝色外框
404 Not Found.
08-30 584
如何去掉input[type=search]鼠标点击时的蓝色外框 这几天开发的时候遇到一个问题，就是input的type设置为search，在webkit内核的浏览器，鼠标点击，搜索框获得焦点的时候会有一个蓝色的边框出现，很影响美观，几经搜索，百度上的答案也不少 比如像这样的： input[type=search] { -webkit-appearance:none; } 我试了，根...
关于组件u-input
dongfangyueguang的博客
01-04 5010
关于自定义封装input <input type=“text” :value=“defaultValue” @input=“handleInput” style=“border: 2rpx solid yellow;”/> handleInput:function(e){ this.defaultValue = e.detail.value; this.$emit("input",this.defaultValue) }; ```
移动端开发：使用搜索框时，键盘可以出现“搜索“俩字，并且可以“回车(Enter)“开始搜索......
成长笔记
04-16 909
<input type='search' id='search'> $('#search).bind('search',function(){ }); 需要注意的是，input[type=search]，在用户输入时，默认情况下会自动在输入框最右侧出现一个 ‘X’，是为了方便用户点击清除所输入的内容，但是这个 X 的默认样式却可能机型不一样而不同，有的是默认一个蓝色的X，很不美观...
search 输入框点击x 的事件
蚁族的奋斗的博客
08-19 755
vant 必填项“*“放后面
我叫陈小皮。
03-10 8371
<van-field v-model="formData.customerName" name="customerName" label="客户名称" placeholder="点击选择" right-icon="arrow" required readonly /> ::v-deep .van-cell--required { &:before{ content: '' } .van-cell__title.van-field_.
IE10+浏览器input输入框或search输入框的叉号（×）问题
wang415229224ye的博客
07-14 877
IE中： input[type=text]::-ms-clear{display: none;} input[type=search]::-ms-clear{display: none;} 谷歌中： input::-webkit-search-cancel-button{display: none;}
html选择一个叉,html5 表单输入时有个小叉号是怎么做的
weixin_35414437的博客
06-03 700
匿名用户1级2017-02-25 回答HTML5已被更多的应用程序所使用，特别是内部应用程序，而HTML5的验证功能，无疑是其中最常用的功能，本文作者(jawidx)将根据自己的使用经验对其进行简单介绍。工具/原料Internet ExplorerHTML5验证1HTML5加强了表单验证功能，可验证是否可空及输入内容的类型及格式，并可通过为表单或控件设置 novalidate 属性指定在提交表单时...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值