苹果手机输入框和下拉框的样式问题

最新推荐文章于 2022-11-05 18:02:09 发布
原创 最新推荐文章于 2022-11-05 18:02:09 发布 · 3.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解决iOS设备上出现的输入框仅有上边框或阴影、下拉框缺失边框的问题。通过添加CSS样式-webkit-appearance:none;并设置自定义背景来还原下拉箭头。

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

在谷歌浏览器测试的时候输入框和下拉框都没有问题，但是真机测试的时候，iPhone手机的输入框就只有上边框或者就是有阴影，下拉框干脆就没有边框

查了很多，发现对于这个问题没有太多的解释，我分享一下我的解决办法

 

在input和select的css样式中加上-webkit-appearance: none;

但是这样下拉框就没有下拉的三角了，这时候再给select标签加上背景图就好了

 

*** 希望我的文章对您有帮助

    

el-select filterable模糊搜索在iOS手机上无法弹出软键盘，解决方案
zhangxueyou2223的博客
06-12 2032
前提：el-select filterable模糊搜索在iOS手机上无法弹出软键盘，在手机上使用时，iOS手机，该组件无法唤起软键盘，导致没法进行模糊搜素。于是。开始去找原因，发现主要是因为 组件中，上有一个属性，而该属性规定输入字段为只读。阻止了用户对值进行修改，直到满足某些条件才行。其在微信开发者工具上是可以模糊搜索，在手机上没法弹出软键盘搜素。
IOS 13 升级16.2版本以上后 Picker选择器BUG,滑动异常、显示异常
weixin_55625066的博客
05-18 1743
分别在mui.picker.js 和 mui.picker.all.js 添加下面代码，判断IOS16.2以上版本webkitTransformOrigin样式不生效。商城添加收货地址时，3级联动选择地址，安卓手机显示，下滑都正常。但是苹果13 16.2版本以上下滑异常，下滑地址时出现跳动，选不中现象。根据各位大佬的解决方案，成功解决苹果13Picker选择器异常问题，下面是解决过程。经过测试，添加地址恢复正常，非常顺溜。
html5 IOS下拉框样式
03-09
html5 IOS下拉框样式html5
h5中的select下拉框在ios中样式兼容问题解决方案。
sdfujichao的博客
12-17 7676
h5中的下拉框在ios中是长这样的。 这样式显然不能满足我们的需要，解决办法。 1：设置css  ：    -webkit-appearance: none; 去掉默认的样式。 2：右边的小三角使用一个图片定位在那里。 ...
select下拉框转苹果IOS样式分段按钮jQuery插件
12-11
Segment.js是一款能够将任何select元素转化为苹果IOS样式的分段按钮的jQuery插件。在苹果设备流行的今天，在你的网页中添加一些IOS样式的按钮，可以使你的页面显得更加时尚。
苹果手机网页选择框　下拉框点击放大处理
chbklmt的专栏
08-20 1191
网页现在自适应的一般就用 <meta name="viewport" content="width=device-width, initial-scale=1"> 在苹果手机端　输入框　会变大不会变回去 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1....
解决IOS select下拉框样式
reaaal的博客
05-23 2300
这里写自定义目录标题问题解决方法 问题 一般来说，在ios端，对于select下拉框会默认出现黑色背景，input输入框上面出现阴影，导致用户体验感不是很好，总体原因是ios中对透明度渲染的效果不是很好。 会出现如下图所示现象： 解决方法 在select的css样式表上添加：-webkit-appearance-: none; outline: none; 该属性会去掉select所有的默认样式，包括下拉箭头，因此如果用了上面的css语句还需要通过额外的样式来控制下拉箭头。 ...
详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容Android和ios）
12-14
本篇文章将详细讲解如何去除`input`输入框在Android和iOS设备上的默认白色背景和边框，从而实现更加美观、协调的界面效果。 首先，问题的起因在于开发者在创建一个订单查询功能时，使用了`<input type="date">`标签...
下拉框和多选框：HTML表单元素的实际运用
常见的HTML表单元素包括输入框（input）、下拉框（select）、多选框（checkbox）、单选框（radio）等。这些元素为用户与网页交互提供了各种形式的输入和选择方式。 ## 1.3 表单元素在网页中的作用和重要性 表单...
HTML5网页设计笔记
yinghanhanhan的博客
11-05 1176
HTML5基础 1.www（万维网） 一种建立在internet上的全球性的、交互性的、多平台的、分布的信息资源网络，采用HTML语言描述超文本文件。 URL（统一资源定位器） HTTP（超文本传输协议） HTML（超文本标记语言）由浏览器解释执行，无需编译 扩展名.html或.htm
最完美的select下拉框美化
05-01
很多人为select的诸多不完善而头痛，如无法自定义样式、IE6中无法被浮动层遮住等等。下面介绍一款堪称最完美的下拉框组件：UU人下拉框 详细参见：www.uur.cn/001
JS下拉选择（同样适用于手机端）
08-01
可以ajax动态获取值，动态生成select，可以修改自己的样式
下拉框样式美化
02-28
网页上下拉框样式单调，单一，已不能满足各种需求页面，本插件优化了下拉框样式，提供不同种类下拉框以供需求选择，真是居家旅行必备良药
Android -- 下拉列表、列表视图、网格视图
十二间记，知不足而奋斗，望远山而前行。千里不辞行路远，时光早晚到天涯。
08-13 6552
下拉列表、列表视图、网格视图
select标签和input标签在ios(苹果)手机上显示的很奇怪
笑到世界都狼狈的博客
09-06 2788
做了个移动端页面，在安卓手机上显示的好好的，结果select标签在苹果手机上显示出了ie8的效果，真的是巨丑无比，而且input标签页发生了变化。 那是因为ios有自己自带的样式，我们需要将默认样式取消掉，然后在设计自己的样式 input[type=datetime-local]{ -webkit-appearance:none; outline:none; ...
android漂亮下拉框,轻量级Jquery简洁精美小巧的下拉框
weixin_29817925的博客
05-28 784
本帖最后由 znds 于 2019-6-26 10:47 编辑基于jquery-1.11.2.min.js的下拉框=========================================效果如下888888.png (23.64 KB, 下载次数: 0)2019-6-26 09:36 上传引用了style 文件 里面 再引用 layout.css、base.css两个CSS当然可以不这么...
移动端苹果手机select兼容问题
林中明月间丶
04-04 8370
select{ -webkit-appearance: none; }
select苹果手机样式设置
Liberal_w的博客
11-29 1506
移动端界面中需要写一个select下拉框，但是苹果手机样式不兼容。 解决方法：是直接把原始样式去掉，自己设置了一个背景图片。 -webkit-appearance:none; appearance:none; -moz-appearance:none; -webkit-appearance:none; background:url('../...
pyqt QComboBox
最新发布
07-02
创建和添加选项```python#创建下拉框combo= QComboBox() #逐个添加选项combo.addItem("选项1") combo.addItem("选项2") #添加带图标的选项combo.addItem(QIcon("icon.png"), "带图标的选项") #批量添加选项combo....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值