HTML5学堂-码匠 HTML5学堂

您当前位于:项目开发经验积累 ——> 移动端项目开发经验 - iPhone、iPad的默认按钮样式等开发经验

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

2015/04/28 22:08:33 | 作者:HTML5学堂(码匠) | 分类:项目开发经验积累 | 关键词:移动端,兼容,iPhone,按钮默认样式

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

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

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

  1. input[type="button"], input[type="submit"], input[type="reset"] {
  2.     -webkit-appearance: none;
  3. }
  4. textarea { -webkit-appearance: none;}

欢迎沟通交流~HTML5学堂

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

  1. input::-ms-clear {
  2.     display: none;
  3. }

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

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

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

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS