前两天又遇到一个头疼的问题,在Chrome上调试好的样式,去到手机上打开,傻了。。。

这是什么鬼...

搜了一下,才知道这是appearance属性搞的鬼。。

比方你想让一个div拥有button的样式。能够这么写

    div {
appearance: button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}

所以取消掉默认的button样式,自己写的才干显示出来

    input,
button {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}

注意浏览器支持

全部主流浏览器都不支持 appearance 属性。

Firefox 支持替代的 -moz-appearance 属性。

Safari 和 Chrome 支持更换 -webkit-appearance 属性。

版权声明:本文博主原创文章,博客,未经同意不得转载。

关闭safari浏览器button默认样式的更多相关文章

  1. css重设样式_清除浏览器的默认样式

    由于不同的浏览器默认的样式也不同,所以在网页开发前设置一个公用样式,来清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一. 收集的默认样式的链接地址: 1.eric-meyer-reset ...

  2. 移动端去掉按钮button默认样式

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. 重置浏览器的默认样式(css reset)

    (1)定义:首先css reset指的是重置浏览器的默认样式 (2)作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理 ...

  4. 微信小程序去除Button默认样式

    在小程序开发过程中,使用率蛮高的组件button,因为经常要去除默认样式,然后再自定义样式,所以经常写,自己也总结分享一下简单的实现步骤. (一)实现效果1.实现前(默认样式): 2.实现后(去除默认 ...

  5. 小程序button默认样式透彻理解

    微信小程序有一个默认样式,特别是有一个外边框,虽然看起来不别扭,但是自己每次设置border:0:都不生效,写成内联的样式也不生效,后来才知道里面的边框是伪元素的边框,这里的伪元素可以理解为用css动 ...

  6. 小程序 -- 去掉button默认样式

    button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; p ...

  7. css3修改浏览器scroll默认样式

    最近公司的新项目.前端样式采用的蚂蚁金服的antDesign. 比较喜欢antDesign.BootStrap一类简约大方的前端样式库. 但是在页面布局上.包括一些选择框.默认的scroll样式简直丑 ...

  8. rest.css解决不同浏览器元素默认样式不同的问题

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ...

  9. css知多少(4)——解读浏览器默认样式

    上一节<css知多少(3)——样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下面的两层中,用户自定义样式一般也就是改一改字号大 ...

随机推荐

  1. Caching-缓存架构与源码分析

    Caching-缓存架构与源码分析 首先奉献caching的开源地址[微软源码] 1.工程架构 为了提高程序效率,我们经常将一些不频繁修改,但是使用了还很大的数据进行缓存.尤其是互联网产品,缓存可以说 ...

  2. 水题 hdu1002------用BigInteger解决大数问题

    Problem Description I have a very simple problem for you. Given two integers A and B, your job is to ...

  3. BeagleBone Black教训四局:简单LED对照实验

    BBB教训四局:简单LED对照实验 学习BBB董事会最终目的是做同样的想象单片机控制.但控制是不一样的想法,在所有(Linux在本质上,硬件设备的控制,以虚拟文件有关的设备下的读写),研究了几天头都大 ...

  4. 开源NetWorkSocket通讯组件

    开源NetWorkSocket通讯组件   前言 在<化茧成蝶,开源NetWorkSocket通讯组件>发表之后,收到大家很多个star,在此感谢!更可贵的是,一些网友提出了许多好建议,经 ...

  5. Atitit.Hibernate于Criteria 使用汇总and 关系查询 and 按照子对象查询 o9o

    Atitit.Hibernate于Criteria 使用总结and 关联查询 and 依照子对象查询 o9o 1. Criteria,,Criterion ,, 1 <2. 基本的对象黑头配置磊 ...

  6. 最短路径:Dijkstra,Bellman,SPFA,Floyd该算法的实施

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzQ4NzA1MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  7. JSP简明教程(四):EL表达式语言、JavaBean、Cookie、Session

    EL表达式语言 EL这是Expression Language.的目的是为了简化JSP句法.来看几个例子来清除. ${test} 它会被翻译成<%=test%> ${test.name} ...

  8. SQL Server 2008性能故障排查(一)——概论

    原文:SQL Server 2008性能故障排查(一)--概论 备注:本人花了大量下班时间翻译,绝无抄袭,允许转载,但请注明出处.由于篇幅长,无法一篇博文全部说完,同时也没那么快全部翻译完,所以按章节 ...

  9. mysql经常使用命令总结

    MySQL经常使用指令(备查) 最经常使用的显示命令: 1.显示数据库列表.  show databases;  2.显示库中的数据表:  use mysql; show tables;  3.显示数 ...

  10. 蓝牙4.0BLE cc2540 cc2541 ios OAD课程(空中固件升级)[原版的,多图]

           蓝牙4.0BLE cc2540 cc2541 ios OAD课程(件) 为阿莫单片机论坛  www.AmoMcu.com 原创.仅仅公布于csdn博客, 如需转载,请注明出处,谢谢!   ...