select下拉框在IOS中背景变黑、出现阴影问题

最新推荐文章于 2019-09-06 16:32:33 发布
最新推荐文章于 2019-09-06 16:32:33 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： web前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gll77/article/details/79698248
版权

select下拉框在ios自带浏览器中，会自带黑色背景及阴影，解决方法：

 设置其样式的时候加上-webkit-appearance: none; 但此时select下拉框点开的小箭头也会消失，所以这种情况下可以设置background: url(……)  no-repeat  right ;background-size: xx ; 来自己添加下拉箭头，或用其他方式自己添加。


gll77
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈Vue Element中Select下拉框选取值的问题
08-27
在这篇文章中，我们将浅谈 Vue Element 中 Select 下拉框选取值的问题，并提供一个实际的解决方案。 一、获取选中后的值 在 Vue Element 中，我们可以使用 v-model 指令来绑定 Select 组件的值，并获取选中后的值...
快速解决select2在bootstrap模态框中下拉框隐藏的问题
10-18
今天小编就为大家分享一篇快速解决select2在bootstrap模态框中下拉框隐藏的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
select列表框边缘阴影
qq_33203125的博客
08-04 1560
在改变select样式的时候， 设置border: none;可以将边框去掉， 添加appearance:none;          -moz-appearance:none;      -webkit-appearance:none;   可以将小倒三角去掉， 但在点击选择的时候会出现边缘阴影，想要去掉可以这样写： select:focus {     box-shado
select下拉框、input输入框在IOS中背景变黑、出现阴影
热门推荐
CamilleZJ的博客
12-21 1万+
移动开发：苹果手机中，select下拉框、input输入框背景变黑、出现阴影现象的解决方案。
select默认选项中颜色为灰色，选择后变黑色
M_SSY的博客
11-06 7561
一般select下拉框有一个默认的值'请选择',当时请选择的时候是灰色,选择了其他内容的时候变为黑色 var unSelected = "#999"; var selected = "#333"; $(function () { $("select").css("color", unSelected); $("option").css(".
CSS-解决苹果点击高亮、安卓select灰色背景（select下拉框在IOS中背景变黑、出现阴影问题）...
weixin_30457551的博客
07-11 666
1.在苹果手机上，用点击事件后会出现一个高亮的阴影；面对click事件的阴影，解决办法： *{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; } 2.在安卓手机上的select有灰色背景，解决办法： select{ appearanc...
select标签和input标签在ios(苹果)手机上显示的很奇怪
笑到世界都狼狈的博客
09-06 2664
做了个移动端页面，在安卓手机上显示的好好的，结果select标签在苹果手机上显示出了ie8的效果，真的是巨丑无比，而且input标签页发生了变化。 那是因为ios有自己自带的样式，我们需要将默认样式取消掉，然后在设计自己的样式 input[type=datetime-local]{ -webkit-appearance:none; outline:none; ...
完美解决iview 的select下拉框选项错位的问题
08-27
在使用iview的过程中，我们可能会遇到select下拉框选项错位的问题，当弹出框超过一屏需要滚动时，select的下拉选项会出现错位。这种问题的出现可能是由于iview组件的样式设置引起的。 在iview中，select下拉框组件...
html5 IOS下拉框样式
03-09
html5 IOS下拉框样式html5
解决element ui select下拉框不回显数据问题的解决
10-17
然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个问题，并提供解决方案。 问题描述： 当使用`el-select`组件绑定数据模型（`v-model`）时，下拉框在编辑表单时...
在element-ui的select下拉框加上滚动加载
12-12
在项目中，我们需要运用到很多来自后端返回的数据。...于是《在element-ui的select下拉框加上滚动加载》诞生了。 这里通过自定义封装vue指令进行封装。（什么是指令：官方指令叫v-on,v-model） 以下以element-ui中的sel
BootStrap中关于Select下拉框选择触发事件及扩展
01-19
Select下拉框的问题，想在选择一个选项后，前台显示做出变动，并且知道选择的是第几个选项。 这个很好解决： 如下: <select class=form-control onchange=selectOnchang(this)> 所有申请商家 待审核商家...
在layui框架中select下拉框监听更改事件的例子
01-21
在select 加入红框中的代码（看不到红框的往右拖动一点） ...以上这篇在layui框架中select下拉框监听更改事件的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
ximenxiafeng的专栏
10-30 4262
之前写了一个登录表单页面，再iphone上测试遇到了一些奇怪的问题：表单中的input[type="submit"]按钮在iPhone的safari浏览器下会出现圆角的情况；input[type="text"]文本输入框会有内阴影，这些问题该怎么处理呢？请看下文 今天在公司写了一个登录页面效果，让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type
去掉select 默认样式（ios）
weixin_30725467的博客
10-30 1087
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .sel { ...
h5中的select下拉框在ios中样式兼容问题解决方案。 实例
最新发布
05-30
好的，针对您的问题，以下是一个解决方案的实例，供参考： 1. 首先，在html中定义一个select标签，并给它一个类名，例如“select-style”： ```html <select class="select-style"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> ``` 2. 然后，在CSS中定义该类名的样式，包括一些兼容性的处理： ```css .select-style { -webkit-appearance: none; /* 去掉ios默认样式 */ -moz-appearance: none; /* 去掉firefox默认样式 */ appearance: none; /* 去掉其他浏览器默认样式 */ background-image: url('path/to/arrow-icon'); /* 添加自定义的下拉箭头图标 */ background-size: 12px; /* 设置图标大小 */ background-repeat: no-repeat; /* 不重复显示图标 */ background-position: 95% center; /* 将图标放置在下拉框的右侧中间位置 */ padding: 8px; /* 设置内边距 */ border: 1px solid #ccc; /* 设置边框 */ } ``` 3. 最后，使用JavaScript监听下拉框的变化，并动态修改其选中项的样式： ```javascript var select = document.querySelector('.select-style'); select.addEventListener('change', function() { var selectedOption = this.options[this.selectedIndex]; selectedOption.style.backgroundColor = '#ccc'; selectedOption.style.color = '#fff'; }); ``` 以上就是一个简单的解决方案，它可以使下拉框在ios中显示正常，同时也可以在其他浏览器中兼容。需要注意的是，不同的页面可能需要根据自己的实际情况进行一些微调，例如调整箭头图标的位置和大小等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值