-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按钮的默认渲染的更多相关文章

  1. 苹果浏览器Safari对JS函数库中newDate()函数中的参数的解析中不支持形如“2020-01-01”形式

    苹果浏览器safari对new Date('1937-01-01')不支持,用.replace(/-/g, "/")函数替换掉中划线即可 如果不做处理,会报错:invalid da ...

  2. 禁止苹果浏览器Safari将数字识别成电话号码的方法

    偶然发现用ipad访问我的网站时,发现网站上的一串数字变颜色了(原来是红色的),现在变成了蓝色.一开始以为网站出了什么问题,后来在PC端查看,发现颜色依旧是红色.在ipad上点击还会弹出菜单呼叫的选项 ...

  3. 修复iPhone的safari浏览器上submit按钮圆角bug

    今天在公司写了一个登录页面效果,让我碰到一个怪异的问题——"表单中的input type=submit和input type=reset按钮在iPhone的safari浏览器下圆角有一个bu ...

  4. 苹果浏览器和uc浏览器在移动端的坑(日常积累,随时更新)

    先mark 1 .  移动端uc浏览器不兼容css3 calc() 2 .  ie8下a标签没有内容给宽高也不能触发点击跳转 3 . safari输入框加上readOnly="ture&qu ...

  5. submit按钮修改宽高的坑

    近些天对h5非常感兴趣,边工作边学习,虽然比较累,但过得很踏实.每天都要学习一点东西,这样才能对得起自己.好了,废话不多说,进入今天的主题. 今天遇到了一个非常有趣的东西,就是在修改submit按钮的 ...

  6. html bottom html submit按钮表单控件与CSS美化

    一.html submit与bottom按钮基本语法结构 1.html submit按钮在input标签里设置type="submit"即可设置此表单控件为按钮. submit按钮 ...

  7. iOS系列 基础篇 06 标签和按钮 (Label & Button)

    iOS系列 基础篇 06 标签和按钮 (Label & Button) 目录: 标签控件 按钮控件 小结 标签和按钮是两个常用的控件,下面咱们逐一学习. 1. 标签控件 使用Single Vi ...

  8. 浏览器内核控制Meta标签说明文档【转】

    背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的几款浏览器为例,我们优先通过Webkit内核渲 ...

  9. 浏览器内核控制Meta标签说明文档

    浏览器内核控制Meta标签说明文档 原文链接 背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的 ...

随机推荐

  1. Hp Open View安装使用视频

    去年完成的cisco works 2000操作(http://chenguang.blog.51cto.com/blog/350944/124729)视频深受广大博友欢迎许多人来信咨询,最近刚做完一个 ...

  2. JAVA Mail邮件实现发送

    package com.test;import java.util.Date;import java.util.Properties;import javax.mail.Message;import ...

  3. Vue 打包后报错 Uncaught TypeError: Cannot redefine property: $router

    原因:就如报错提示所描述的,不能重新定义$router,说明是重复定了$router.通常是因为在项目中安装了vue-router的依赖并且用Vue.use()使用了vue-router,还在inde ...

  4. CSRF Failed: Referer checking failed - no Referer

    postman模拟登录出了这个错误,其实看标题就知道大概是怎么回事,网上大概找了办法,也没说到位,所以干脆自己找源码了. 问题很明显就是出在 CSRF 上,理所当然去查看 CsrfViewMiddle ...

  5. STM32之CAN通讯接收过滤器过滤分析

    一.前言 学习了CAN通讯,底层的东东CAN控制器已经帮你处理完成,也就是CAN通讯协议已经做好,你按协议格式往对应的位扔数据发送就好,所以使用CAN通讯,我们只需要去关心制定发送的数据间的协议,也就 ...

  6. CISP/CISA 每日一题 13

    监控信息系统人员所提供服务的效率和效果的工具: 1.例外报告:识别所有没有成功完成的或出了故障的应用 2.作业重运行报告:大多数异常终止作业都会导致重起 3.操作员问题报告:记录计算机运行问题及解决方 ...

  7.  洛谷 P3056 [USACO12NOV]笨牛Clumsy Cows

    P3056 [USACO12NOV]笨牛Clumsy Cows 题目描述 Bessie the cow is trying to type a balanced string of parenthes ...

  8. phalcon之视图缓存

    phalcon官方站点上的视图缓存用法根本就是不通的 现提供一种行的通的方法例如以下: public function testAction() { if( $this->view->ge ...

  9. Behavioral模式之Visitor模式

    1.意图 表示一个作用于某对象结构中的各元素的操作.它使你能够在不改变各元素的类的前提下定义作用于这些元素的新操作. 2.别名 无 3.动机 考虑一个编译器.他将源程序表示为一个抽象语法树.该编译器须 ...

  10. springMVC视图解析器——InternalResourceViewResolver(转)

    springmvc在处理器方法中通常返回的是逻辑视图,如何定位到真正的页面,就需要通过视图解析器. springmvc里提供了多个视图解析器,InternalResourceViewResolver就 ...