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

最新推荐文章于 2022-02-10 16:20:26 发布
最新推荐文章于 2022-02-10 16:20:26 发布
阅读量1.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljy_1024/article/details/88695773
版权

问题：

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

 

答案：

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

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

 

微信公号搜索：遇见一朵小花。（或扫描二维码）找我玩啊只讲对你有用的东西。

也常常给粉丝寄出自己看完闲置的好书，喜欢看书的可以来看看，

还不定期在公众号请大家喝奶茶！

想与我聊聊或者有什么问题都可以在公众号找到我。

等你哟~

JessicaLilyAn
关注
实时监控input框,实现输入框与下拉框联动的实例
08-28
"实时监控input框，实现输入框与下拉框联动的实例" 本文讲述了如何使用HTML、JQuery和PHP技术来实现实时监控input框，实现输入框与下拉框联动的实例。该实例可以在实际项目中应用，具有很好的参考价值。 一、HTML...
下拉框的下拉长度设定
wodexiaobaitu的专栏
12-24 8699
当你在界面上拖出来了combox控件后，点击它的属性，把No integral height这一项选成true 点击一下那个combox控件的小三角,现在拖动出现的那个框框的的长度,拖到你觉得合适就行啦 如果你的内容比较多，那么你刚刚拖得那个框框当你编译完运行后会自动产生一个滚动条的。 到此，combox的下拉框大小就设置好了。 参考知识点如下: 一、那就是在设计界面里，
移动端可输入的下拉选择的两个简单案例
不善言谈者
04-23 2550
在pc端,如果既有下拉,也有可输入,有好多种实现方式,比如输入联想,eysui的combobox框. 不过,在做移动端时,由于经验原因,我并没有找到既能输入也可以选择的框架.因此,只能手动实现了. 第一种,这种原来只是单纯的下拉选择,所以我直接使用的是weui中的Select 功能.不过,后来用户觉得只有下拉不行,万一下拉列表中没有的话,怎么办.于是,用户要求如果下拉没有的,希望能够手工录入. 其...
css 清除输入框和下拉列表等表单元素的默认选中样式
PrimaryColor
03-05 497
样式代码： outline:none;
CSS实现手机端分辨率下把一个导航栏菜单转换成一个下拉菜单
web分享客的博客
08-07 1332
做PC的项目遇到的一个需求，苹果X屏幕下，把所有的tabbar换成一个下拉框选择，我百度了很久，没有看到类似的提问和回答，我就Google去找解决方法，果然在这个神奇的网站（https://css-tricks.com）找到了，持续关注，感觉是个很NB的技术类网站，对于前端开发来说帮助很大。 HTML CSS 文章原网址查看：https://css-tri...
带输入框的下拉框.rar
01-11
在IT界，尤其是在前端开发中，"带输入框的下拉框"是一种常见的用户界面元素，它结合了传统的下拉选择框与输入框的功能，提高了用户在数据筛选和选择时的效率。这种设计通常用于当选项众多或者用户可能需要通过关键词...
文本输入框仿下拉框效果
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`的基础是至关重要的。`...
ios实现下拉框
c1719561053的博客
02-10 1350
原作者：https://www.jianshu.com/p/00186b02cb04 1.新增一个EBDropdownListView.m，内容如下： #import "EBDropdownListView.h" @implementation EBDropdownListItem - (instancetype)initWithItem:(NSString*)itemId itemName:(NSString*)itemName { self = [super init]; if (se
html5 IOS下拉框样式
03-09
html5 IOS下拉框样式html5
iOS输入框下拉选择框（UITableView实现）
08-27
基于UITableView和UITextField实现的输入框下拉选择输入。
jQuery仿微信自定义菜单自适应手机底部的弹出菜单
09-20
jQuery仿微信自定义菜单自适应手机底部的弹出菜单，很好的样式效果
input下拉带输入框
weixin_30273501的博客
04-15 330
html5 自带的datalist实现 html代码： <input list="students"> <datalist id="students"> <option value="Lily"> <option value="Lucy"> <option value="Jim"> </datalist> ...
android实现下拉框和输入框结合
adolph_jun的博客
10-16 6717
1、如何实现：将一个EditText和ListView+PopupWindow 结合起来。 2、需要的布局： 1、EditText+ImageButton 的布局        2、ListView的布局
下划线样式的输入框
Ωеω ☆的专栏
12-09 819
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线 dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线 solid : 　实线边框
关于safari上的select宽高问题小技，自定义下拉框
weixin_30374009的博客
08-31 237
之前一直用windows做开发，最近换了个mac，在几经折腾之下，安装完了各种开发工具，IDE等，然后欣然打开自己正在开发的网站。突然发现mac上所有的下拉框都变了，都是默认样式，无论padding，height都不起作用了， 然后就去搜博客呀，果然，网上好多朋友都在说这个问题，苹果也是让人恼火。 附上一个连接 http://blog.csdn.net/liushuwei02...
select下拉框的样式在浏览器上的兼容问题
weixin_33725270的博客
06-17 842
最近项目中遇到了自定义下拉框的默认样式在谷歌，火狐，IE上显示不同的问题。 左侧图片就是重写的样式，下拉框的右侧三角是选用的bootstrap里面的图片，通过绝对定位放过去的。 css: select { /*Chrome同Firefox与IE里面的右侧三角显示的样式不同*/ border: solid 1px #ddd; /*将默认的select选择框样式清除...
写一个vue3点击新增添加一个输入框和下拉框选项
最新发布
06-11
好的，以下是一个简单的 Vue 3 组件示例，点击“新增”按钮可以动态添加一个输入框和一个下拉框选项： ```html <template> <div> <div v-for="(item, index) in list" :key="index"> <input type="text" v-model="item.text"> <select v-model="item.select"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> </div> <button @click="addNewItem">新增</button> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const list = ref([{ text: '', select: 'option1' }]); const addNewItem = () => { list.value.push({ text: '', select: 'option1' }); }; return { list, addNewItem, }; }, }; </script> ``` 在这个示例中，使用了 Vue 3 的 `ref` 函数来创建了一个响应式的 `list` 变量，表示当前的输入框和下拉框列表。在模板中使用 `v-for` 指令循环渲染列表中的每一项，同时使用 `v-model` 指令实现数据的双向绑定。 在点击“新增”按钮时，调用 `addNewItem` 方法，向 `list` 中添加一个新的空对象，表示新增的输入框和下拉框。这个新的对象也会被 Vue 自动响应式地处理，从而实现动态添加新的输入框和下拉框选项的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JessicaLilyAn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值