-webkit-appearance: none;
今天在web群里聊天的时候,发现了这个东东,我好像不怎么认识他,于是查了下关于他的信息:
抄的例子,
-----------
IOS环境下的按钮都是经过美化的,但通常我们在设计web app的时候不需要这些看上去老土的样式,所以,去除这些显得很有必要。
下面这句代码就是重置这些样式的:
-webkit-appearance: none;
通常,我们在写移动端的web开发时,会zaicommon.css中添加以下CSS代码来:
input[type=button]{
-webkit-appearance:none;
outline:none
}
----------------------------
但是我觉得他好像还有些确定,并不是那么完美。如下:
-------------------------
-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;的更多相关文章
- 使用CSS3的appearance属性改变元素的外观
昨天在和同事一起完成项目的时候,我使用了appearance来渲染select,但是在firefox下出现问题,不完美,最后去除了.但还是要学习下这个属性.大家都知道每个浏览器对HTML元素渲染都不一 ...
- CSS3的appearance属性--改变元素的外观
CSS3 appearance 属性 CSS 参考手册 实例 使 div 元素看上去像一个按钮: div { appearance:button; -moz-appearance:button; /* ...
- 【原】如何改变表单元素的外观(for Webkit and IE10)
表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...
- 自定义webkit搜索框样式
好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览 ...
- 【转】.NET多种WebKit内核/Blink内核浏览器初步测评报告
第1篇:.NET多种WebKit内核/Blink内核浏览器初步测评报告 本文转自“吾乐吧软件站”,原文链接:http://www.wuleba.com/?p=23590 报告研究时间:2013-10- ...
- CSS 的 appearance 属性
在 Firefox 1.0+,Chrome 1.0+ 和 Safari 3.0+ 中,我们可以使用 -moz-appearance 或者 -webkit-appearance 属性让元素模仿系统原生控 ...
- css3 appearance在iphone上面的问题
最近在做项目的时候,发现iphone上中 <input type="button">在修改了css样式之后还是保留自带的一些属性,然后在安卓手机上不会出现这样的问题, ...
- Webkit二:RenderTree 创建
RenderObject 作为所有Render 树节点的基类,完全类似与DOM树中的Node基类,它是构成Render 树的基础,作用非比寻常,其中包含了构成Render 树所可能涉及到的一些基本属性 ...
- -webkit-appearance —— webkit外观样式属性
-webkit-appearance —— webkit外观样式属性 -webkit-appearance 是一个 不规范的属性(unsupported WebKit property),它没有出现在 ...
- [WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析
[WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285 ...
随机推荐
- android DatePickerDialog配合edittext实现按日期查询
我们从网上一搜DatePickerDialog相关实现,大多都是默认的形式,也就是不带取消按钮.下边上我的代码:我将代码简单的封装到一个工具类里边 public static DatePickerDi ...
- vsftpd允许root用户登录
Linux下安装vsftpd之后,默认的配置是 匿名用户可以登录,匿名帐户有两个: 用户名:anonymous 密码:空 用户名:ftp 密码:ftp 如果要用匿名进行上传删除等操作需要配置其它参数. ...
- zoj2314 经典 无源汇有上下界最大流 并输出可行流
ZOJ Problem Set - 2314 Reactor Cooling Time Limit: 5 Seconds Memory Limit: 32768 KB Specia ...
- nodejs教程
http://www.yiibai.com/nodejs/ http://www.runoob.com/nodejs/nodejs-tutorial.html http://www.runoob.co ...
- 2015第23周一SVN插件安装
之前想把eclipse(3.7)的SVN插件版本从1.8.x降到1.6.x,上午折腾了好久没弄好,先是尝试在线安装,按网上说的1.6.x的url安装不成功(可能是网络问题,下载不到资源),然后尝试下载 ...
- [VBA]根据身份证号码计算年龄的Excel函数
是的,昨天刚发表了一篇和Excel自定义函数有关的博客,今天又一篇,有凑数的嫌疑.但是,保存知识和传播知识本来就是写博客的初衷,所以也并不多余. 如果不知道什么是Excel自定义函数,请移步这里[1] ...
- (2)自己写一个简单的servle容器
自己写一个简单的servlet,能够跑一个简单的servlet,说明一下逻辑. 首先是写一个简单的servlet,这就关联到javax.servlet和javax.servlet.http这两个包的类 ...
- Json帮助类以及如何使用
首先要添加引用System.Runtime.Serialization. public class JSONHelper { public static string Serialize<T&g ...
- xdu_RainAndBow 鞍山打铁记
我们作为弱校xdu的七队(大四一支,大三四支,大二俩),本来都没指望今年可以出去,结果运气不错,学校得到几个激动名额, 于是我们激动地成功申请到了鞍山站的名额,嗯...可以出去旅游了. 不过我们毕竟太 ...
- 算法导论(第三版) Exercises4.2(求最大和子数组的算法优化过程)
4.1-1 如所有元素都为负,则返回所有元素中最大的负数. 4.1-2(暴力法求最大和子数组) struct subarray { int start, end, sum; }; void brute ...