zoukankan      html  css  js  c++  java
  • (webapp)微信和safri 对于html5 部分功能不兼容,多选或单选下拉框去除边框无效果。

    1 appearance:none;

    2 -moz-appearance:none; /* Firefox */

    3 -webkit-appearance:none; /* Safari 和 Chrome */

     

    例子:使用appearance属性改变元素的外观

    1 <p class="lookLikeAButton">我是一个段落P元素 </p>

    2 <p class="lookLikeAListbox">我是一个段落P元素 </p>

    3 <p class="lookLikeAListitem">我是一个段落P元素 </p>

    4 <p class="lookLikeASearchfield">我是一个段落P元素 </p>

    5 <p class="lookLikeATextarea">我是一个段落P元素 </p>

    6 <p class="lookLikeAMenulist">我是一个段落P元素</p>

     

     1 /*看起来像个按钮,以按钮的风格渲染*/ 

    2 .lookLikeAButton{ 

    3      -webkit-appearance:button; 

    4      -moz-appearance:button; 

    5 } 

    6 /*看起来像个清单盒子,以listbox风格渲染*/ 

    7 .lookLikeAListbox{ 

    8      -webkit-appearance:listbox; 

    9      -moz-appearance:listbox;

    10 }

    11 /*看起来像个清单列表,以listitem风格渲染*/

    12 .lookLikeAListitem{

    13      -webkit-appearance:listitem;

    14      -moz-appearance:listitem;

    15 }

    16 /*看起来像个搜索框,以searchfield风格渲染*/

    17 .lookLikeASearchfield{

    18      -webkit-appearance:searchfield;

    19      -moz-appearance:searchfield;

    20 }

    21 /*看起来像个文本域,以textarea风格渲染*/

    22 .lookLikeATextarea{

    23      -webkit-appearance:textarea;

    24      -moz-appearance:textarea;

    25 }

    26 /*看起来像个下接菜单,以menulist风格渲染*/

    27 .lookLikeAMenulist{

    28      -webkit-appearance:menulist;

    29      -moz-appearance:menulist;

    30 }

     

     

    /*去除单选或多选边框边框 css样式*/

    .seclectnoBoreder{

          -webkit-appearance:searchfield;

           -moz-appearance:searchfield;

      }

    如果为百度,360等 即可用以下css样式去解决

    .touming{

    background:transparent;

      border-top:none;

      border-bottom: none;

      border-left: none;

      border-right: none

    }

  • 相关阅读:
    django-debug-toolbar的配置以及使用
    Django+telnetlib实现webtelnet
    Centos7 安装 telnet 服务
    Django+paramiko实现webshell
    Zabbix 历史数据存储到 Elasticsearch
    CA和自签证书
    linux加密算法与应用
    LVM拆除pv对应的磁盘
    目录迁移
    添加一个swap设备
  • 原文地址:https://www.cnblogs.com/circlebreak/p/5355326.html
Copyright © 2011-2022 走看看