移动端开发-iPhone、iPad的默认按钮样式等开发经验

HTML5学堂:从JS的逻辑层来说,移动端远远不如PC平台,但是“恐怖的”兼容问题是移动端最为头疼的地方。本文介绍iPad与iPhone的默认按钮样式的处理方法。关于兼容问题,我们很建议大家在开发的过程中记录下来,并定期整理总结。移动端很新,兼容问题也有很多是未知的,只有长期不断的积累才能够有所成长。

iPhone、iPad的按钮存在默认样式,如何去除默认样式呢?

input[type="button"], input[type="submit"], input[type="reset"] {
   -webkit-appearance: none;
}
textarea { -webkit-appearance: none;}

在IE10下,当文本框输入内容后,在文本框的右侧会出现一个小叉叉

input::-ms-clear {
   display: none;
}

去除浏览器文本框默认高光样式:

input:focus{
   -webkit-tap-highlight-color:rgba(0,0,0,0);
   -webkit-user-modify:read-write-plaintext-only;
}

注意:第一句是安卓4.0版本以下去除高光的方式,第二句代码是安卓4.0以上版本去除高光的方式。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MelonTeam专栏

小白看React Native

1.What is React Native ? 众所周知,产品的需求总是想快速的迭代。但是由于应用分发市场的审核机制(主要是iOS审核),使一些快速迭代的...

8618
来自专栏菜鸟计划

CSS布局(四) float详解

一、float设计初衷 因为float被设计出来的初衷是用于——文字环绕效果。即,一个图片一段文字,图片float:left之后,文字会环绕图片。 <d...

3708
来自专栏帮你学MatLab

如何记笔记

Step1. 在听讲过程中,在左侧内尽量多记有意义的论据、概念等讲课内容。 Step2. 下课以后,尽可能及早将这些论据、概念简明扼要地概括(简化)在右侧。 ...

2816
来自专栏web前端教室

[一对一讲什么] 之 什么叫切图?

今天有人在我公众号里留言,问我“什么叫切图?是不是按着图片切。。。”?我没有直接回复他,而是决定把这个问题拿到这里用一篇文章来回答。 严格来讲,切图,是网页制作...

2118
来自专栏大史住在大前端

推荐两个漂亮的编程字体

号称最好看的编程字体。在个别编辑器下中文的显示会有bug(比如笔者用的sublime3,也可能是版本问题),所以被舍弃了,但英文字体着实还是很漂亮的,喜欢的朋友...

1383
来自专栏菜鸟前端工程师

html+css学习笔记009-定位

952
来自专栏我就是马云飞

带你实现漂亮的滑动卷尺

前言 HenCoder最近在搞一个仿写活动,活动地址 http://hencoder.com/activity-mock-1/,之前关注过他写的关于绘制系列的文...

19210
来自专栏极客慕白的成长之路

Web前端开发推荐阅读书籍、学习课程下载

学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢?

2835
来自专栏程序员互动联盟

你所不知道的html5与html中的那些事(四)——文本标签

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么...

3489
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

1003

扫码关注云+社区