-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引擎的问题。

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

时间: 2024-10-03 22:53:46

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

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

大家都知道每个浏览器对HTML元素渲染都不一样,比如说"button",在chrome和ff中,渲染出来的效果都是不尽相同的.这样一来就有了今天这个思路,利用浏览器的对元素的默认渲染风格,我们可以使用"appearance"属性对任何元素的渲染风格改变,最简单的来说,我要把"a"链接默认显示成"按钮"风格,那么我们可以使用"appearance"设置为"button". "ap

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

CSS3 appearance 属性 CSS 参考手册 实例 使 div 元素看上去像一个按钮: div { appearance:button; -moz-appearance:button; /* Firefox */ -webkit-appearance:button; /* Safari 和 Chrome */ } 亲自试一试 页面底部有更多实例. 浏览器支持 所有主流浏览器都不支持 appearance 属性. Firefox 支持替代的 -moz-appearance 属性. Saf

Webkit二:RenderTree 创建

RenderObject 作为所有Render 树节点的基类,完全类似与DOM树中的Node基类,它是构成Render 树的基础,作用非比寻常,其中包含了构成Render 树所可能涉及到的一些基本属性及方法,内容相当多,其主要数据成员及方法分别如下: 其中成员m_parent.m_previous.m_next为构建Render 树设置好关联基础:m_Node 则为DOM 树中对应的节点:m_style 成员则描述该节点对应的各种CSS基本属性数据,下面会单独介绍:至于其他的诸如m_positi

.NET多种WebKit内核/Blink内核浏览器

转自:http://www.wuleba.com/23590.html[吾乐吧软件站] 星级 名称语言版本优点缺点 ★★ Chromium Embedded Framework (CEF) C/C++ 3.1547.1406 1.开源项目,有社区支持 1.C++更新维护成本太高 2.一直都还在更新维护 2.开发难度较大 3.基于CEF二次开发项目多 ★★★★ Xilium.CefGlue C# 3.1547.1448 1.基于CEF,DotNET封装 1.参考资料较少 2.继承CEF优良特性 2

css3 appearance在iphone上面的问题

最近在做项目的时候,发现iphone上中 <input type="button">在修改了css样式之后还是保留自带的一些属性,然后在安卓手机上不会出现这样的问题, 在网上找了一些资料, 使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格,其实我们可以反过来思路, 使用“appearance”属性,来改变任何元素的浏览器默认风格,简单的说, 你可以使用“appearance”属性将“段落p”渲染成button的风格,也可以渲染

自定义webkit搜索框样式

好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览器上表现一致... 用过mac的同学应该了解这个情况: 就拿前端观察右上角的搜索框来说,在Windows下和mac下的表现就完全不一样啊,mac下(包括safari和chrome),除了宽度外,你设置的其它样式基本是无效的,这种细长的界面和iOS上的搜索框是一样的,或许苹果认为,搜索框就应该是这样的

appearance—外观样式属性

appearance 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中. appearance是用来改变按钮和其他控件的外观,使其外观类似于原生控件. 例: <p class="lookLikeAButton">我是一个段落P元素 </p><p class="lookLikeAListbox">我是一个段落P元素 </p><p class="

八大Webkit内核浏览器

列举出时下最流行的Webkit内核浏览器,所以我们并不会做出评测和对比.PS:本文列举的浏览器有一部分为IE+Webkit双核浏览器,如果您对其他IE内核浏览器很感兴趣<抛弃数据!用体验和感觉告诉你什么才是最好用的浏览器!>一文可能会对你有所帮助.尖端技术的Webkit内核WebKit 是一个开源的浏览器引擎,与之相对应的引擎有Gecko(Mozilla Firefox 等使用)和Trident(也称MSHTML,IE 使用).同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称

webkit 常见问题汇总

前段时间有人问我一个简单的问题,html如何创建解析的? 我讲了一大堆,什么通过DocumentLoader, CachedResourceLoader, CacheResource, ResourceLoaderScheduler, ResourceHandle这些类一步一步的完成cache查找然后请求下载等等. 滔滔不绝,直到我调试xml解析时,我才发现好多问题都与理解的不一致,在分析源码的时候只了解了大体步骤.细节你真的清楚吗? 一.HTTP header 网页头请求 列举几个重要的 Re

webkit浏览器常见开发问题

前段时间有人问我一个简单的问题,html如何创建解析的? 我讲了一大堆,什么通过DocumentLoader, CachedResourceLoader, CacheResource, ResourceLoaderScheduler, ResourceHandle这些类一步一步的完成cache查找然后请求下载等等. 滔滔不绝,直到我调试xml解析时,我才发现好多问题都与理解的不一致,在分析源码的时候只了解了大体步骤.细节你真的清楚吗? 一.HTTP header 网页头请求 列举几个重要的 Re