今天在web群里聊天的时候,发现了这个东东,我好像不怎么认识他,于是查了下关于他的信息:

抄的例子,

-----------

IOS环境下的按钮都是经过美化的,但通常我们在设计web app的时候不需要这些看上去老土的样式,所以,去除这些显得很有必要。

下面这句代码就是重置这些样式的:

  1. -webkit-appearance: none;

通常,我们在写移动端的web开发时,会zaicommon.css中添加以下CSS代码来:

  1. input[type=button]{
  2. -webkit-appearance:none;
  3. outline:none
  4. }
    ----------------------------
    但是我觉得他好像还有些确定,并不是那么完美。如下:
    -------------------------
    -webkit-appearance:none导致无法获取checkbox

这个BUG发生的背景有点复杂。大概就是一个Form表单,要用Validation Plugin验证,Ajax提交。结果发现在Webkit浏览器下无论怎样都阻止这个form在提交的时候刷新整个页面。

最后总算抓到元凶是checkbox上的-webkit-appearance:none属性。

-webkit-appearance会将webkit浏览器中的元素默认样式去除。checkbox在这个属性下就直接隐藏掉了。然后用JS获取checkbox值时Webkit浏览器会报很奇怪的错误。给这个元素重新赋上-webkit-appearance:checkbox就不会报错了。

其他的的表单元素以及其他的情况并未测试。这个问题在Chrome和Safari中都会出现,应该是Webkit引擎的问题。

--------------------------

-webkit-appearance: none;的更多相关文章

  1. 使用CSS3的appearance属性改变元素的外观

    昨天在和同事一起完成项目的时候,我使用了appearance来渲染select,但是在firefox下出现问题,不完美,最后去除了.但还是要学习下这个属性.大家都知道每个浏览器对HTML元素渲染都不一 ...

  2. CSS3的appearance属性--改变元素的外观

    CSS3 appearance 属性 CSS 参考手册 实例 使 div 元素看上去像一个按钮: div { appearance:button; -moz-appearance:button; /* ...

  3. 【原】如何改变表单元素的外观(for Webkit and IE10)

    表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...

  4. 自定义webkit搜索框样式

    好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览 ...

  5. 【转】.NET多种WebKit内核/Blink内核浏览器初步测评报告

    第1篇:.NET多种WebKit内核/Blink内核浏览器初步测评报告 本文转自“吾乐吧软件站”,原文链接:http://www.wuleba.com/?p=23590 报告研究时间:2013-10- ...

  6. CSS 的 appearance 属性

    在 Firefox 1.0+,Chrome 1.0+ 和 Safari 3.0+ 中,我们可以使用 -moz-appearance 或者 -webkit-appearance 属性让元素模仿系统原生控 ...

  7. css3 appearance在iphone上面的问题

    最近在做项目的时候,发现iphone上中 <input type="button">在修改了css样式之后还是保留自带的一些属性,然后在安卓手机上不会出现这样的问题, ...

  8. Webkit二:RenderTree 创建

    RenderObject 作为所有Render 树节点的基类,完全类似与DOM树中的Node基类,它是构成Render 树的基础,作用非比寻常,其中包含了构成Render 树所可能涉及到的一些基本属性 ...

  9. -webkit-appearance —— webkit外观样式属性

    -webkit-appearance —— webkit外观样式属性 -webkit-appearance 是一个 不规范的属性(unsupported WebKit property),它没有出现在 ...

  10. [WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析

    [WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285 ...

随机推荐

  1. Linux编程遇到的问题汇集(持续更新中)

    1.源代码编译redis报告错误: undefined reference to `__sync_add_and_fetch_4' 最近项目组在实验Redis,源代码编译的时候,遇到了错误:undef ...

  2. flask开发restful api系列(4)--七牛图片服务

    上一章我们讲到如何利用alembic来更新数据库,这章,我们讲如何通过七牛服务来存储图片. 像我们大多数公司一样,公司资金比较少,如果自己开发图片服务器,代价太大:如果我们用自己的网站服务器来保存图片 ...

  3. Python学习笔记整理(五)Python中的列表.

    列表和字段,这两种类型几乎是Python所有脚本的主要工作组件.他们都可以在原处进行修改,可以按需求增加或缩短,而且包含任何种类的对象或者被嵌套. 一.列表 列表的主要属性: *任意对象的有序集合 从 ...

  4. C 和 C++的 不同

    转自: http://studytipsandtricks.blogspot.com/2012/05/15-most-important-differences-between-c.html Basi ...

  5. TVS_压敏电阻等保护类器件的布局问题

    世上本没有垃圾,垃圾都是放错了位置的资源. 对于电路来说,保护器件就是其保护作用的关键资源,但如果放错了位置,它就是垃圾:甚至不仅是垃圾,而还可能成为祸害. 由最近承接的几起电路原理图审核项目来看,触 ...

  6. 自制单片机之十三……时钟IC_DS1302

    在网上看了很久,发现初学者最有兴趣的就是DS1302时钟电路,也很自然,它是个做出来就让你觉得最实用的电路了,但实际上制做上并不简单,首先你要让你的显示部分(不管是数码管还是LCD)调试通过.然后把D ...

  7. IComparer<T> 接口Linq比较接口

    IComparer<T>比较两个对象并返回一个值,指示一个对象是小于.等于还是大于另一个对象. 在Linq当中,很多扩展方法接受一个实现IComparer<T>接口的实例的对象 ...

  8. SQL判断一个数是整数还是小数

    DECLARE @number1 AS numeric(10,2),@number2 AS numeric(10,2) SELECT @number1=10.00,@number2=10.2 SELE ...

  9. Activity生命周期,状态保存恢复(经典)

    一.整体框架 二.main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...

  10. linux磁盘限额配置:quota命令

    LINUX下也有类似WINDOWS NTFS所用的磁盘限额,用的是quota来实现通过rpm -q quota确定是否已安装用quota只能对patation做限额,要做到针对某个目录来做只能靠ln ...