去掉select在苹果手机上的原生样式

最新推荐文章于 2025-12-08 09:18:56 发布
原创 最新推荐文章于 2025-12-08 09:18:56 发布 · 242 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #css #mysql #js #javascript 

outline: none;
-webkit-appearance: none;

该属性会去掉select所有的默认样式，包括下拉箭头，因此需要通过额外的样式控制下拉箭头

木子啊
关注
uniapp微信小程序 - 解决苹果ios下拉页面顶部出现空白+上拉页面底部出现留白情况，微信小程序在苹果IOS手机用户滑动页面出现白底情况（强力搞定ios上下左右滑动出现额外空白问题，详细示例代码）
🏆 前端领域优质创作者
11-01 3302
解决uniapp微信小程序在iOS下拉顶部出现白色区域问题，解决IOS苹果系统 uniapp微信小程序拉伸有白色背景，uniapp ios 页面底部空白一块，uniapp微信小程序ios界面下拉顶部出现白色区域，Uniapp微信小程序-解决iOS系统下拉或者拖动整个页面出现白底问题，uniApp微信小程序iOS禁止上下拉显示白边，uniapp开发微信小程序 禁止ios页面下拉下滑滚动 出现空白的情况，uniapp ios底部空白，uniapp 解决ios上拉下拉白边处理，uniapp开发app,ios设备页
uniapp：在map地图组件上添加控件，在地图上添加浮层展示自定义按钮或元素，uniApp如何在Map组件地图上添加悬浮在上面的图标/图片（全平台兼容安卓苹果app、H5网页、微信小程序、nvue）
高级前端工程师
06-29 3011
uni-app的map添加控件问题，uniapp实现地图展示控件，uniapp小程序如何在map组件上增加按钮，uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，Uniapp腾讯地图添加控件，uniapp百度地图添加控件，地图上展示控件并可以点击，在地图上展示控件信息，uniapp map地图怎么向地图上增加工具栏，使用cover-view将控件在地图上展示，解决uniapp map上添加浮层无法显示问题，不显示怎么办，css样式不生效，地图等最高层
去掉select 默认样式（ios）
weixin_30725467的博客
10-30 1150
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .sel { ...
iOS select标签适配去掉iOS默认select样式
楠少博客
08-28 1514
iOS端对select标签有独特的适配，如何取消这些默认样式呢 css样式表 加上 select { -webkit-appearance: none; }
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
ximenxiafeng的专栏
10-30 4363
之前写了一个登录表单页面，再iphone上测试遇到了一些奇怪的问题：表单中的input[type="submit"]按钮在iPhone的safari浏览器下会出现圆角的情况；input[type="text"]文本输入框会有内阴影，这些问题该怎么处理呢？请看下文 今天在公司写了一个登录页面效果，让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type
去除select原生的样式
Zeus的博客
10-17 874
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
去除苹果手机select 默认样式
weixin_zsh的博客
08-28 7763
主要用的是 -webkit-appearance: none;/*兼容苹果手机*/ 这是一个小demo &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text
h5在手机上下拉框要点击两次
04-23
根据用户提供的引用内容，特别是引用[3]提到苹果系统上非可点击元素监听click事件可能无效，需要添加cursor:pointer样式。这可能和当前问题相关，因为下拉框如果是自定义的，可能元素本身不是可点击的，导致第一次...
微信小程序 - 苹果iOS系统下拉或拖动整个页面出现白底情况，解决在苹果手机下拉页面会有留白部分空白问题（提供禁止ios页面下拉下滑滚动出现空白方案，无论是下滑页面还是放大缩小都不会有留白或白底出现）
🏆 前端领域优质创作者
11-01 3398
微信小程序解决iOS系统下拉或者拖动整个页面出现白底问题，微信小程序禁止ios页面下拉下滑滚动出现空白的情况，微信小程序-ios系统-下拉上拉出现白色如何处理，苹果小程序上下拉出现留白情况，微信小程序-ios系统-弹簧回弹效果，下拉上拉出现白色，如何处理呢？解决ios打开微信小程序下拉页面出现空白，小程序下拉有白色底的问题，微信小程序 页面左右拖动空白的解决办法，微信小程序iOS禁止上下拉显示白边，微信小程序ios上下拉留白，苹果小程序上下拉出现留白情况苹果微信小程序下拉出现白色浮动，小程序ios手机下拉页
uniapp - 安卓|苹果App软件实现调用百度人脸识别接口服务及人脸活体认证功能，uniapp苹果ios、安卓Android手机app平台，人脸认证、活体检测、身份证与人脸验证（示例代码，一键复制
高级前端工程师
03-16 4376
uniApp，android安卓，ios苹果，百度智能人脸识别，软件应用开发，uniapp app软件平台端，uniapp安卓app实现接入百度人脸识别接口，uniapp苹果ios接入百度人脸检测api服务，人脸对比，人脸搜索，uniapp百度人脸识别，百度人脸识别功能uniapp免费插件功能组件详细示例教程，身份证信息是否与人脸匹配，活体检测，人脸识别，人脸检测，uniapp利用百度人脸识别完成实名认证、身份证识别、人脸识别前端页面，如何使用人脸识别，uniapp实现检测人脸完成认证，人脸采集功能，调用摄
修改select样式
guizi0809的博客
07-15 5211
修改select样式
select标签和input标签在ios(苹果)手机上显示的很奇怪
笑到世界都狼狈的博客
09-06 2814
做了个移动端页面，在安卓手机上显示的好好的，结果select标签在苹果手机上显示出了ie8的效果，真的是巨丑无比，而且input标签页发生了变化。 那是因为ios有自己自带的样式，我们需要将默认样式取消掉，然后在设计自己的样式 input[type=datetime-local]{ -webkit-appearance:none; outline:none; ...
清除 select 默认样式
itSeven7的博客
02-08 3913
select向下箭头隐藏方法： css{  appearance:none;      -moz-appearance:none;      -webkit-appearance:none;    -ms-appearance:none;  } 先清除默认样式，再使用span标签去代替下拉箭头样式。 在IE下隐藏下来箭头 css{ select::-ms-expand { di
取消 select 下拉框默认样式
热门推荐
abcde158308的博客
01-03 1万+
select 下拉框 安卓和ios 的默认样式不同，乐视手机下拉框会自带下拉箭头，这里所以要取消 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉框&lt;/title&gt; &l
Java SE——12.异常（≠错误）《干货笔记》
要努力去发光，而不是被照亮~
12-08 1181
Java SE——12.异常（≠错误）《干货笔记》
基于Java旅游信息推荐系统(源码+数据库+文档)
最新发布
JIngJaneIL的博客
12-08 729
本文介绍了基于SpringBoot+Vue的旅游信息推荐系统和学生成绩管理系统开发项目。系统采用前后端分离架构，后端使用SpringBoot框架简化企业级开发，前端采用Vue.js实现响应式界面，数据库选用MySQL。文章详细说明了系统设计原则、技术选型理由，并提供了代码示例和测试案例。项目包含完整功能演示视频，所有源码经过验证可正常运行。同时提供最新计算机毕业设计选题参考，文末附有源码获取方式。系统适用于大学生项目实战开发，具有模块化设计、安全性强等特点。
css怎么修改select原生样式和option原生样式
07-17
在自定义 HTML 中 `<select>` 和 `<option>` 元素的默认样式时，由于浏览器对这些元素的原生支持存在差异，直接使用 CSS 样式化可能会遇到兼容性问题。为了解决这些问题，可以结合清除默认样式、添加背景图以及处理不同状态下的视觉表现来实现更一致的效果。 ### 修改 `<select>` 的基本样式 为了统一不同浏览器中 `<select>` 元素的外观，首先需要清除其默认的边框和下拉箭头样式，并应用自定义样式： ```css select { /* 清除默认边框 */ border: solid 1px #d7d7d7; /* 设置圆角 */ border-radius: 4px; /* 设置宽度 */ width: 100%; /* 移除聚焦边框 */ outline: none; /* 设置字体颜色 */ color: #333; /* 清除浏览器默认的下拉箭头 */ appearance: none; -moz-appearance: none; -webkit-appearance: none; /* 添加自定义箭头图标 */ background: url('arrow.png') no-repeat right center; padding-right: 20px; /* 确保文本不与箭头重叠 */ } ``` 对于 Internet Explorer 浏览器，还需要额外隐藏默认的下拉箭头： ```css select::-ms-expand { display: none; } ``` ### 自定义 `<option>` 的样式 `<option>` 元素的样式化较为复杂，尤其是在某些浏览器（如 Chrome）中，其样式受到限制。可以通过以下方式增强其视觉表现： ```css select option { /* 设置内边距 */ padding: 4px 8px; } /* 设置选中项的背景色和字体颜色 */ select option:checked { background-color: rgba(40, 114, 225, 0.3) !important; color: #2872e1; /* 背景色兼容不同浏览器 */ background: linear-gradient(0deg, #b2d1f3 0%, #b2d1f3 100%); /* 字体颜色兼容不同浏览器 */ -webkit-text-fill-color: #2872e1; } ``` ### 处理 `<select>` 的 focus 状态 当 `<select>` 元素获得焦点时，可以通过 `:focus` 伪类选择器进一步优化用户体验： ```css /* 当 select 获得焦点时，设置选中项的样式 */ select:focus option:checked { color: #2872e1 !important; /* 背景色兼容不同浏览器 */ background: linear-gradient(0deg, #b2d1f3 0%, #b2d1f3 100%); /* 字体颜色兼容不同浏览器 */ -webkit-text-fill-color: #2872e1 !important; } ``` ### 使用伪元素添加自定义箭头 除了使用背景图片外，还可以通过伪元素 `::after` 或 `::before` 来创建下拉箭头，提高可维护性和响应式设计能力： ```css .form_select { position: relative; /* 隐藏默认箭头 */ appearance: none; -moz-appearance: none; -webkit-appearance: none; /* 添加右侧填充以避免内容与箭头重叠 */ padding-right: 30px; } /* 使用伪元素添加自定义箭头 */ .form_select::after { content: '▼'; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); pointer-events: none; color: #999; } ``` ### 兼容性注意事项 尽管上述方法可以在大多数现代浏览器中正常工作，但需要注意的是，某些浏览器（特别是旧版浏览器）可能对 `<option>` 样式的控制有限。因此，在开发过程中建议进行跨浏览器测试，确保最终效果符合预期。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值