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

}

(webapp)微信和safri 对于html5 部分功能不兼容,多选或单选下拉框去除边框无效果。的更多相关文章

  1. JQuery实现的 checkbox 全选;<select>下拉框功能

    1. 全选的checkbox选中时,子checkbox全部选中.反之,全部不选 2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中 3.子checkbox的数量和子check ...

  2. 自定义SWT控件三之搜索功能下拉框

    3.搜索功能下拉弹出框 package com.view.control.select; import java.util.ArrayList; import java.util.LinkedList ...

  3. struts-hibernate-ajax完成区县和街道级联下拉框功能(二补充使用json解析list结果集,ajax循环json层级处理)

    针对<struts-hibernate-ajax完成区县和街道级联下拉框功能>进行补充,上一篇中,要在action中拼接JSON格式字符串,很容易手抖.直接用json处理一下转成json格 ...

  4. 微信内置浏览器中,点击下拉框出现页面乱跳转现象(iphone)

    微信内置浏览器中,点击下拉框出现页面乱跳转现象(iphone) 前言: 这是小菜博客的第三篇文章.一直认为自己可以表达的东西太过简单,难以上台面,总是吝啬地不肯写.就算是写,也不知道从何开始.在同事的 ...

  5. 【经验】angularjs 实现带查找筛选功能的select下拉框

    一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...

  6. JS为Select下拉框添加输入功能

    JavaScript使用parentNode.nextSibling.value实现的本功能,实际上你会发现网页上有两个控件元素,一个是Select,一个是input,使用CSS将input覆盖于se ...

  7. 微信小程序下拉框

    微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果 下面来看一下代码: 首先WXML <view class='select_box'> <vie ...

  8. 原生javascript实现 下拉框搜索功能

    由于业务需求,要实现 一个下拉框搜索功能.这个下拉功能和百度的还是有点区别的,百度的是时时与服务器交互的,而这个只是模拟.技术点在于实现 了搜索功能. 未搜索前如下图: 搜索后: <!DOCTY ...

  9. C# ,数据导出到带有级联下拉框的模板(一,模板的级联功能)

    一.首先解决如何做模板中增加级联功能 1,首先打开一个新的Excel文件,新增sheet,把分类保存在里面,如下图所示 2.回到sheet1,选中要增加下拉框的行(注意:请排除首行,首行是标题) 3. ...

随机推荐

  1. 铁乐学python_day22_面向对象编程4

    以下内容大部分摘自博客http://www.cnblogs.com/Eva-J/ 封装 [封装]隐藏对象的属性和实现细节,仅对外提供公共访问方式. [好处] 将变化隔离: 便于使用: 提高复用性: 提 ...

  2. Python的网络编程 Socket编程

    Socket是进程间通信的一种方式,与其他进程间通信的一个主要不同是:能实现不同主机间的进程间通信,网络上各种各样的服务大多都是基于Socket来完成通信的,要解决网络上两台主机间的通信问题,首先要唯 ...

  3. Apache Hadoop各版本发布的SVN地址

    http://svn.apache.org/repos/asf/hadoop/common/tags

  4. Linux - Confluence搭建

    0. 摘要 Confluence自身携带内置数据库,对于生产环境建议搭建外置数据库,Confluence通过相应驱动连接上.并操作数据库.Confluence支持多种数据库,本文采用MySQL. 1. ...

  5. 【JavaScript】JavaScript(V8)实现输入输出

    首先看牛客网的样例:https://www.nowcoder.com/questionTerminal/dae9959d6df7466d9a1f6d70d6a11417 计算a+b的和,每行包行两个整 ...

  6. virtualbox+vagrant学习-4-Vagrantfile-1-简介

    Vagrantfile Vagrantfile的主要功能是描述项目所需的机器类型,以及如何配置和提供这些机器.之所以称为Vagrantfiles,是因为文件的实际文本文件名是Vagrantfile(除 ...

  7. lombok问题

    今天研究了下以dubbo作为分布式的开源项目dubbo-app. 为了排除一些依赖的冲突和干扰,我另外开辟一个新的工作空间,同时我也将公司项目的依赖打个压缩包分类备份下. 这样一来,dubbo-app ...

  8. centos6.5添加阿里docker加速器

    1. 配置阿里docker加速器 vi /etc/sysconfig/docker 在文件末尾追加下面两行 other_args="--registry-mirror=https://pl8 ...

  9. oracle 基本知识点

    //创建临时表空间create temporary tablespace test_temp tempfile 'E:\oracle\product\10.2.0\oradata\testserver ...

  10. js input框输入1位数字后自动跳到下一个input框聚焦

    // input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); f ...