移动端开发-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 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

HTML5视音频-解决全屏下出现的控制栏

HTML5学堂:HTML5视音频-解决全屏下的控制栏。HTML5可以简简单单的实现视频、音频的播放功能,功能虽好用,但是它的默认样式有点淡淡的忧伤,问题虽存在,...

2696
来自专栏HTML5学堂

【系列】移动端项目经验 表单兼容(上篇)

移动端 表单兼容(上篇) HTML5学堂:从这篇文章开始,我们将为大家总结介绍移动端的常见兼容问题,今天要提的是关于表单的一些兼容问题,本文主要包括input文...

2738
来自专栏Winter漫聊技术

动起来-几个Android常用动效

本文Demo: https://github.com/XunMengWinter/Fly Material Design初露锋芒: http://www.ji...

663
来自专栏北京马哥教育

LaTeXila:Linux 的多语言 LaTeX 编辑器简介

豌豆贴心提醒,本文阅读时间7分钟 LaTeXila 是一个多语言 LaTeX 编辑器,专为那些偏爱 GTK+ 外观的 Linux 用户设计。这个软件除了操作简...

3309
来自专栏前端新视界

CSS 特殊属性介绍之 pointer-events

首先看一下 MDN 上关于 pointer-events 的介绍: CSS属性 pointer-events 允许作者控制特定的图形元素在何时成为鼠标事件的 t...

15910
来自专栏小樱的经验随笔

CTF---密码学入门第七题 杯酒人生

杯酒人生分值:10 来源: Veneno 难度:易 参与人数:2633人 Get Flag:790人 答题人数:963人 解题通过率:82% 使用古典密码 ...

2658
来自专栏企鹅号快讯

代码也疯狂:diagram生成流程图

在IT圈有这样一句(笑)话:任何一件需要重复两遍以上的事情,都有必要为它写一个脚本自动完成。话虽然夸张,但确实是这样的道理,事实上,在我们日常作业的许多方面其实...

3029
来自专栏智能大石头

Windows Live Writer插入代码vs2010插件

    网络上的许多插件都不错,我比较看好vsPaste,可惜很久没更新了,在vs2010中复制代码的时候,会出现中文乱码的情况。据说是vs2010的BUG。 ...

3605
来自专栏python学习路

十、Python练习----基础搭建飞机大战

只是简单的学习了pygame,实现飞机的摧毁还需要多张图片的切换,和sprite(碰撞精灵),还有多种音效的添加(如背景音乐、摧毁特效)。以后再深入学习我只是练...

3755
来自专栏WindCoder

一个创建产品动画说明视频的新手指南

英文原文:A Step-by-step Guide to Creating Animated Product Explainer Videos

481

扫描关注云+社区