苹果浏览器Safari对html标签submit按钮的默认渲染
-webkit-appearance: none;
上面的设置就告诉Safari不要使用默认渲染,使用我们写好的
有这么一个webkit的私有属性:
-webkit-appearance:none; /*去除input默认样式*/
使用这个之后select的小三角就消失了,可以加上background: url('http://ourjs.github.io/static/2015/arrow.png') no-repeat scroll right center transparent;
添加该样式,并且值为'none'时即可取消浏览器对于控件的默认样式。
另外这个属性也有个神奇的地方~ 他可以用来调用显示浏览器对各种控件的默认样式,比如:
<span style="-webkit-appearance:button;"> 我是span啊亲!!</span>
那么他所显示的效果是:
哈 觉得挺有趣的~ 另外这个属性可以用来去除Iphone上面那个恶心的超大圆角的按钮默认样式,从而使自己编辑的按钮样式显示正常。
下面是这个属性可能会有的值,也算是可以显示的浏览器控件默认效果。
- checkbox
- radio
- push-button
- square-button
- button
- button-bevel
- listbox
- listitem
- menulist
- menulist-button
- menulist-text
- menulist-textfield
- scrollbarbutton-up
- scrollbarbutton-down
- scrollbarbutton-left
- scrollbarbutton-right
- scrollbartrack-horizontal
- scrollbartrack-vertical
- scrollbarthumb-horizontal
- scrollbarthumb-vertical
- scrollbargripper-horizontal
- scrollbargripper-vertical
- slider-horizontal
- slider-vertical
- sliderthumb-horizontal
- sliderthumb-vertical
- caret
- searchfield
- searchfield-decoration
- searchfield-results-decoration
- searchfield-results-button
- searchfield-cancel-button
- textfield
- textarea
具体可以浏览这个网站,上面有对于这些效果的demo,狠狠地戳这:http://davidwalsh.name/webkit-appearance
苹果浏览器Safari对html标签submit按钮的默认渲染的更多相关文章
- 苹果浏览器Safari对JS函数库中newDate()函数中的参数的解析中不支持形如“2020-01-01”形式
苹果浏览器safari对new Date('1937-01-01')不支持,用.replace(/-/g, "/")函数替换掉中划线即可 如果不做处理,会报错:invalid da ...
- 禁止苹果浏览器Safari将数字识别成电话号码的方法
偶然发现用ipad访问我的网站时,发现网站上的一串数字变颜色了(原来是红色的),现在变成了蓝色.一开始以为网站出了什么问题,后来在PC端查看,发现颜色依旧是红色.在ipad上点击还会弹出菜单呼叫的选项 ...
- 修复iPhone的safari浏览器上submit按钮圆角bug
今天在公司写了一个登录页面效果,让我碰到一个怪异的问题——"表单中的input type=submit和input type=reset按钮在iPhone的safari浏览器下圆角有一个bu ...
- 苹果浏览器和uc浏览器在移动端的坑(日常积累,随时更新)
先mark 1 . 移动端uc浏览器不兼容css3 calc() 2 . ie8下a标签没有内容给宽高也不能触发点击跳转 3 . safari输入框加上readOnly="ture&qu ...
- submit按钮修改宽高的坑
近些天对h5非常感兴趣,边工作边学习,虽然比较累,但过得很踏实.每天都要学习一点东西,这样才能对得起自己.好了,废话不多说,进入今天的主题. 今天遇到了一个非常有趣的东西,就是在修改submit按钮的 ...
- html bottom html submit按钮表单控件与CSS美化
一.html submit与bottom按钮基本语法结构 1.html submit按钮在input标签里设置type="submit"即可设置此表单控件为按钮. submit按钮 ...
- iOS系列 基础篇 06 标签和按钮 (Label & Button)
iOS系列 基础篇 06 标签和按钮 (Label & Button) 目录: 标签控件 按钮控件 小结 标签和按钮是两个常用的控件,下面咱们逐一学习. 1. 标签控件 使用Single Vi ...
- 浏览器内核控制Meta标签说明文档【转】
背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的几款浏览器为例,我们优先通过Webkit内核渲 ...
- 浏览器内核控制Meta标签说明文档
浏览器内核控制Meta标签说明文档 原文链接 背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的 ...
随机推荐
- 解决配置Ubuntu中vnc远程显示灰屏
解决配置Ubuntu中vnc远程显示灰屏a. 缺失图形化工具b. ~/.vnc/xstartup 权限不对1. Ubuntu 16.04 安装 VNC 及 Mate 桌面环境https://www. ...
- javascript创建对象的方法--构造函数模式
javascript创建对象的方法--构造函数模式 一.总结 构造函数模式作用和不足 1.作用:解决工厂模式不是用new关键字来创建对象的弊端 2.作用:解决工厂模式创建的实例和模型没有内在联系的问题 ...
- 使用SqlBulkCopy进行批量数据插入
Dim dt As DataTable = New DataTable() dt.Columns.Add("DtCostProductRuleGUID", GetType(Guid ...
- Android控件:RadioButton(单选button)
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...
- Android BuildConfig:Gradle自定义你的BuildConfig
在很早之前我发布了这篇博客Android BuildConfig.DEBUG的妙用, 提到了Eclipse中通过BuildConfig.DEBUG字段用来调试Log非常好用,但是殊不知在Android ...
- Python 极简教程(四)变量与常量
变量和常量 在 Python 中没有 常量 与 变量 之分.只有约定成俗的做法: 全大写字母的名称即为 常量: PI = 3.1415926 全小写字母的名称为 变量: name = 'nemo' 变 ...
- 00089_字节输出流OutputStream
1.字节输出流OutputStream (1)OutputStream此抽象类,是表示输出字节流的所有类的超类.操作的数据都是字节,定义了输出字节流的基本共性功能方法: (2)输出流中定义都是写wri ...
- 【习题 6-8 UVA - 806】Spatial Structures
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 写两个dfs模拟就好. 注意每12个数字输出一个换行.. [代码] /* 1.Shoud it use long long ? 2. ...
- Oracle动态SQL语句
动态SQL返回游标: create or replace procedure proc_ValidityDueQuery( p_regioncode in number, p_pscode in nu ...
- nyoj999 师傅又被妖怪抓走了 (预处理+bfs+状态压缩)
题目999 题目信息 执行结果 本题排行 讨论区 师傅又被妖怪抓走了 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描写叙述 话说唐僧复得了孙行者,师徒们一心同体,共诣西方.自宝 ...