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

最新推荐文章于 2019-11-29 18:37:04 发布
最新推荐文章于 2019-11-29 18:37:04 发布
阅读量3.2k 收藏
点赞数
分类专栏： css+js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41673550/article/details/79419697
版权

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

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

 

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

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

 

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

    

小九九嘞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 IOS下拉框样式
03-09
html5 IOS下拉框样式html5
h5中的select下拉框在ios中样式兼容问题解决方案。
sdfujichao的博客
12-17 7540
h5中的下拉框在ios中是长这样的。 这样式显然不能满足我们的需要，解决办法。 1：设置css  ：    -webkit-appearance: none; 去掉默认的样式。 2：右边的小三角使用一个图片定位在那里。 ...
select下拉框转苹果IOS样式分段按钮jQuery插件
12-11
Segment.js是一款能够将任何select元素转化为苹果IOS样式的分段按钮的jQuery插件。在苹果设备流行的今天，在你的网页中添加一些IOS样式的按钮，可以使你的页面显得更加时尚。
苹果手机网页选择框　下拉框点击放大处理
chbklmt的专栏
08-20 1118
网页现在自适应的一般就用 <meta name="viewport" content="width=device-width, initial-scale=1"> 在苹果手机端　输入框　会变大不会变回去 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1....
select苹果手机样式设置
Liberal_w的博客
11-29 1366
移动端界面中需要写一个select下拉框，但是苹果手机样式不兼容。 解决方法：是直接把原始样式去掉，自己设置了一个背景图片。 -webkit-appearance:none; appearance:none; -moz-appearance:none; -webkit-appearance:none; background:url('../...
带输入框的下拉框.rar
01-11
在IT界，尤其是在前端开发中，"带输入框的下拉框"是一种常见的用户界面元素，它结合了传统的下拉选择框与输入框的功能，提高了用户在数据筛选和选择时的效率。这种设计通常用于当选项众多或者用户可能需要通过关键词...
实时监控input框,实现输入框与下拉框联动的实例
08-28
"实时监控input框，实现输入框与下拉框联动的实例" 本文讲述了如何使用HTML、JQuery和PHP技术来实现实时监控input框，实现输入框与下拉框联动的实例。该实例可以在实际项目中应用，具有很好的参考价值。 一、HTML...
文本输入框仿下拉框效果
04-23
CSS部分用于样式化输入框和下拉框，确保它们在页面上正确地定位和显示： ```css #searchInput { width: 200px; } #dropdown { position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow...
下拉框代理和输入框代理示例
12-29
在这个示例中，我们将深入探讨如何使用代理来实现下拉框代理（ComboBox Delegate）和输入框代理（LineEdit Delegate），以限制`QTableWidget`中的单元格输入。 首先，理解`QTableWidget`的基础是至关重要的。`...
select标签和input标签在ios(苹果)手机上显示的很奇怪
笑到世界都狼狈的博客
09-06 2674
做了个移动端页面，在安卓手机上显示的好好的，结果select标签在苹果手机上显示出了ie8的效果，真的是巨丑无比，而且input标签页发生了变化。 那是因为ios有自己自带的样式，我们需要将默认样式取消掉，然后在设计自己的样式 input[type=datetime-local]{ -webkit-appearance:none; outline:none; ...
iOS输入框下拉选择框（UITableView实现）
08-27
基于UITableView和UITextField实现的输入框下拉选择输入。
仿苹果菜单下拉菜单
04-12
仿苹果菜单下拉菜单很漂亮，找了很久才找到的
移动端苹果手机select兼容问题
林中明月间丶
04-04 8300
select{ -webkit-appearance: none; }
修改select默认样式,移动端和pc端通用
热门推荐
蓝色的乌鸦的专栏
06-10 1万+
最近在搞前段,发现select样式已经丑到爆了,找了一些资源修改了一下,稍微好了一点.废话不说了,直接上代码 <div class="select" style="margin-top:0;outline:none;border:1px solid #BBBBBB;border-radius:4px;position:relative;"> <select id="orde...
自定义select下拉框样式
笨鸟肥西的博客
10-20 1336
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;     &lt;head&gt;     ..
iosSelect插件 H5中实现iOS的select下拉联动效果
陈雪珊的博客
12-21 1万+
简要说明官网：http://zhoushengfe.com/iosselect/website/index.html 下载：在官网点击 github 菜单项就可以下载此插件。下载好后可以看到两个文件夹，将src下的两个文件放到工程里的对应位置引入之后就可以按照说明进行使用了，这个插件更适用于移动端。 还有一个demo文件夹，里面是一些下拉联动效果的实例，可以参考它们使用 来实现想要的功能。因为我
写一个vue3点击新增添加一个输入框和下拉框选项
最新发布
06-11
在这个示例中，使用了 Vue 3 的 `ref` 函数来创建了一个响应式的 `list` 变量，表示当前的输入框和下拉框列表。在模板中使用 `v-for` 指令循环渲染列表中的每一项，同时使用 `v-model` 指令实现数据的双向绑定。 在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值