H5 取消iOS 在input type=search中自带的搜索图标

O_OcatO_O

已于 2022-10-11 09:30:00 修改

阅读量566

点赞数

分类专栏： css 文章标签：前端 css html

于 2022-09-22 16:29:52 首次发布

本文链接：https://blog.csdn.net/O_OcatO_O/article/details/126994665

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

input[type="search"]{-webkit-appearance:none;} 
input::-webkit-search-cancel-button {display: none;}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

O_OcatO_O

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

css3搜索框呼出键盘,移动端 input 输入框实现自带键盘“搜索“功能并修改X

weixin_35662171的博客

08-03

1507

主要利用html5的，input[type=search]属性来实现，此时input和type=text外观和功能没啥区别；html代码入下:但要实现点击键盘右下角搜索，来发送请求，js代码如下(以下代码段记得引入jquery)：//方法一$("#myform").on('keypress', function(e) {var keycode = e.keyCode;var searchName ...

uni-app使用uView的search搜索组件踩坑

web15208590912的博客

02-23

2306

场景：在开发后H5移动端项目时，使用uView的search搜索组件时遇到这样一个问题，search组件在安卓系统下显示正常，在ios系统下会显示出手机自带的搜索图标，与search组件的图标有冲突，两个图标会同时显示出来解决：利用uni-app自己的input输入框，自己修改样式，手动加上搜索图标和清除图标，图标是外部引入的阿里图标【注意】：不要给input输入框加上confirm-type=“search”，否则在ios系统下，还是会出现手机自带的搜索图标，和输入框的图标重复了具体代码如下： &l

参与评论您还未登录，请先登录后发表或查看评论

input [type=search] 搜索框去掉默认边框和旁边的小图标

06-22

2万+

input[type="search"]{-webkit-appearance:none;} input::-webkit-search-cancel-button {display: none;} http://www.html-5.cn/WebApp/css/10243.html

【bug解决】ios 15 type=“search“ 搜索类型的输入框自带搜索图标

坚信万物皆可切的切图仔

01-07

2990

问题在ios端的开发中，用到搜索框时，常常会发现搜索框会多余一个搜索图标，这其实是ios的某些版本，search类型的输入框会自带图标。我们可以用css将其隐掉解决全局css加上 input[type="search"]{-webkit-appearance:none;} [type="search"]::-webkit-search-decoration { display: none; } input::-webkit-search-cancel-button {d

清除html5 input[type="search"] 清除图标

qq_26642611的博客

04-23

1656

input[type="search"]::-webkit-search-cancel-button { display: none; }

css & input type & search icon

weixin_30840573的博客

06-25

354

css & input type & search icon bug type="search" <input @input="autoSearch" @change="autoSearch" @click="addSearchHistory" ref="search-input" ...

input 输入框type='search'去掉×

weixin_30596165的博客

05-03

840

input输入时，为了让ios键盘的前进会变为搜索，设置input的type='search'但是安卓输入框后面会出现个小叉，实际不需要这个× 解决办法： input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none; } 转载于:https://www.cnb...

移动端原生H5开发

谢鑫的博客

07-26

1937

移动端原生H5开发配置项 1. Viewport  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <!-- 针对一些不识...

常见的移动端H5页面开发遇到的坑和解决办法

qq_35859392的博客

04-17

910

转过来，平时看看。虽然还有很多问题至今无解。比如：华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏。！！ 1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的9...

H5开发：常见H5开发兼容问题

Generon的博客

05-25

8546

1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也

input搜索框的隐藏和显示

wowowowowowowoow的博客

06-18

1936

应用场景：多个搜索框合并为一，用ajax返回值来判断输入的值是哪种，相应切换input框思路： 1：display 2：type 代码：但是在ie8下： getElementById(input1).type = "hidden";或getElementById(input1).type = "text";是不支持的综上所述，用display来控制显隐是最适用的

ios15搜索框自带搜索图标导致冲突的解决

wx_wx_ll的博客

10-12

2234

IOS 15 input 的 confirm-type="search" 时，会自带搜索图标，并且图标会挡住 placeholder 的内容，例如uni-app框架的<u-search>组件，同理。解决方法： HBuilderX alpha 升级到 3.2.8 已修复；如果没有外网不方便升级，可在app.vue style 内增加如下样式 [type="search"]::-webkit-search-decoration { ...

移动端禁止长按选择

xjun0812的博客

06-04

1655

简单粗暴： *{user-select:none;-webkit-user-select:none;}

vue 解决ios15适配 input框出现两个放大镜的问题

m0_46828720的博客

11-30

1138

前段时间在ios15版本出来以后项目中遇见了搜索框里出现两个放大镜的问题解决办法---------- 只需要在APP.vue文件中加上这一段即可---- 亲测有效 /deep/input[type="search"]{ -webkit-appearance:none !important; } ...

H5 input[type=search] 去掉输入框中系统自带的清除小图标

weixin_33895695的博客

06-27

3149

2019独角兽企业重金招聘Python工程师标准>>> ...

苹果手机 onkeyup失效

深漂小码哥

03-31

774

改成oninput

iphone手机safari输入法不支持keyup事件解决方法

xyphf的博客

09-18

3980

问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，用input监听键盘keyup事件，在安卓手机是可以的，但是在ios手机自带的输入法无效，经过查询得出以下方法;起初我想到的是使用 JQ 里的 change，但是马上排除此方法，因为 change 是在文本框失去焦点时才会触发。曲线救国一下，想到用 keydown 来解决。在安卓一切

ios input输入框type=search，软键盘搜索按钮

xuexizhe88的博客

03-29

1万+

在ios中input输入内容后搜索，html提供type=search的模式，但是软键盘弹起后，键盘上没有“搜索”，必须在input外层加上form，必须有action<form action=""><input type="search" placeholder="" placeholder="请输入搜索" /></form>...

你不知道的input[type=search]