去掉IOS默认样式 Html5 Input date 和 select

最新推荐文章于 2021-05-25 17:25:17 发布
最新推荐文章于 2021-05-25 17:25:17 发布
阅读量471 收藏
点赞数
分类专栏： CSS2/CSS3 html/html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fucaiwei/article/details/103572697
版权

Html5 Input date 和 select 去掉IOS默认样式 由于在安卓上没有什么大问题就不说了但是IOS 下 时间选择和下拉框 选择样式比较丑，当然是个人觉得了自己用的是以下样式处理，不是知道别人的问题是不是一样的；这个是个人在工作中遇到的问题，都贴出来，也给自己存一份记录

input{
　　　　background:none;
　　　　outline:none;
　　　　appearance:none;
　　　　-moz-appearance:none;
　　　　-webkit-appearance:none;
　　  }
Web研究者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容Android和ios）
12-14
前两天在开发在微信访问的HTML5页面，里面有个订单查询要选择时间，刚开始使用的<input type="date">输入框，没加任何的样式，效果是白色的背景再加上边框很丑，完全与整个背景不协调。 刚开始设置了输入框背景色透明（background-color:transparent;），在iOS上面背景色和边框都没有了，但是在andriod上边框和背景色还是存在。后来加上样式FILTER: alpha(opacity=0)，在andriod中就去掉了边框和背景。 去掉背景和边框比以前好看多了，但是因为类型是date,所以右边有个图标，感觉不协调，加上appearance:none;样式图标没
ios手机上为input[type="date"]设置样式兼容问题 已解决
web全栈开发的博客
10-21 3233
在移动网页上需要有一个时间控件，我用了HTML5的input[type=“date”]，这个控件在按Android和ios上的实现都是可以的，但是样式有点丑，特别是ios上，于是我加了一段css: input{ 　　　　background:none; 　　　　outline:none; 　　　　appearance:none; 　　　　-moz-appearance:none; 　　　　-web...
input date显示类似placeholder效果 ios安卓兼容
JIZQAQ学习&踩坑笔记本
01-24 580
先叨叨一个踩坑历程。 我最开始是使用了类似下面这种方式，最开始type为text，当进行点击后换成date。 在pc端测试的时候看起来还不错，但是到手机上测试发现，需要双击那个框框才能做到出现日历供选择。 &lt;input type="text"onfocus="(this.type='date')" placeholder="Start Date"value=""/&gt; 后...
修改input属性为date的样式 移动端 兼容ios、安卓
Liberal_w的博客
12-09 1981
默认的<input type="date" value=""/>样式如下所示： 因为是移动端的所以需要兼容ios和安卓系统，所以就需要修改样式啦，代码如下： input[type="date" i]{ width: 2.2rem; line-height: 2.2rem; font-size: 0.8rem; height: 100%; backgro...
去掉select 默认样式（ios）
weixin_30725467的博客
10-30 1078
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .sel { ...
html5 IOS下拉框样式
03-09
html5 IOS下拉框样式html5
html5中如何去掉input type date默认样式
热门推荐
三片叶子的修行日记
06-01 6万+
html5中如何去掉input type date默认样式1.时间选择的种类:HTML代码： 选择日期：<input type="date" value="2017-06-01" /> 选择时间：<input type="time" value="22:52" /> 选择星期：<input type="week" /> 选择月份：<input type="month" />2.对日期时间控件
input 在iOS去掉默认
liutao_li的博客
04-21 259
input[type=button]{ -webkit-appearance:none; outline:none }
解决ios h5 input输入框被输入法弹出一块区域的问题
08-27
今天小编就为大家分享一篇解决ios h5 input输入框被输入法弹出一块区域的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html5+CSS 实现禁止IOS长按复制粘贴功能
01-19
/*设置IOS页面长按不可复制粘贴，但是IOS上出现input、textarea不能输入，因此将使用-webkit-user-select:auto;*/ *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit...
IOS UITableView和UITableViewCell的几种样式详细介绍
09-01
主要介绍了IOS UITableView和UITableViewCell的几种样式详细介绍的相关资料,需要的朋友可以参考下
修改 IOS 默认input / select 样式
weixin_30593443的博客
02-24 188
在做页面的时候发现，给 select 加样式的时候 而我想要的是 ios 是有自己的默认样式的。 通过查资料知道 -webkit-appearance:none；加上这行代码之后 虽然还不是很完美，但是小箭头可以通过背景图片来搞。 但是没有加之前 在微信开发者工具中是正常的， 安卓也是正常的。 转载于:https://www.cn...
input type为date时，去掉小箭头
weixin_30337157的博客
05-23 541
<input class="input_data" type="date" /> input[type=date]::-webkit-inner-spin-button { visibility: hidden; } 转载于:https://www.cnblogs.com/zhangjianzhen/p/9075600.html...
jquery绑定input的change事件
xiejunna的博客
12-07 5万+
<input style="width: 100%;height: 30px;" id="inputid"/> $(function(){ //输入框的值改变时触发 $("#inputid").on("input",function(e){ //获取input输入的值 console.lo
修改 HTML5 input type date默认样式
又是再见?
01-26 2万+
1.时间选择的种类: HTML代码：  选择日期：  选择时间：  选择星期：  选择月份： 2.对日期时间控件的样式进行修改 目前WebKit下有如下9个伪元素可以改变日期控件的UI： ::-webkit-datetime-edit – 控制编辑区域的 ::-webkit-datetime-edit-fields-wrapper – 控制年月日这个区域的 ::
css 清空ios端_html – 删除日期输入上的“清除”按钮(iOS safari)
weixin_36455339的博客
12-24 290
实际上,通过为所有最新的浏览器指定“伪类”,可以很容易地实现这一点.如果将输入设置为“required”以消除清除按钮不起作用…–然后尝试以下伪类-webkit-clear-button,专门为基于webkit的浏览器设置样式：/* Hide the clear button from date input */input[type="date"]::-webkit-clear-button {-...
android设置默认日期格式,android – 将日期格式化为本地设置,但仅限...
weixin_36373949的博客
05-25 485
对于Build.VERSION.SDK_INT< 18我无法找到一种方法来获得符合用户偏好的月/日格式.如果您愿意以用户的语言环境默认模式(不是他们的首选顺序或格式)接受月/日,则This answer有效.我的实现在小于18的版本中使用完整的数字格式,或者如果在以下精心编程的一系列步骤中遇到任何问题.>将用户的数字日期格式模式作为String>将图案缩小为骨架格式,无需符号或年...
iOS下的按钮css去除原生样式
weixin_30500663的博客
11-26 87
IOS环境下的按钮都是经过美化的，但通常我们在设计web app的时候不需要这些看上去老土的样式，所以，去除这些显得很有必要。 下面这句代码就是重置这些样式的： input[type=button]{ -webkit-appearance:none; outline:none } input[type=submit]{ -webkit-appearance...
去除input为date的小三角方法 -webkit-appearance: none;
DeBruyne的博客
07-19 2472
.allday{ position: absolute; top: 50%; transform: translateY(-50%); left: 5.5rem; font-size: 0.35rem; } input[type=date]::-webkit-inner-spin-button { -webkit-appearance: none;  }
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
发出的红包

打赏作者

Web研究者

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

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

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

打赏作者

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

抵扣说明：

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

余额充值