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. strip() 只去头尾的,不能去中间

    # b = st.strip("|") # strip() 只去头尾的,不能去中间

  2. #002 WebStrom Live Templete 使用说明

        WebStrom Live Template 使用说明 2016-03-30 20:33:52 星期三 WebStrom是前端一个强大的开发IDE.目前前端主要的开发工具有 Sublime T ...

  3. TeamViewer app案例分析

    产品 产品名 TeamViewer远程app 选择原因 远程连接软件是不时之需,当有时私人电脑没有在身边而又需要操作电脑时,远程控制TeamViewer这个软件能帮我们大忙. 调研与评测 1.第一次上 ...

  4. python subprocess 和 multiprocess选择以及我遇到的坑

    The subprocess option: subprocess is 用来执行其他的可执行程序的,即执行外部命令. 他是os.fork() 和 os.execve() 的封装. 他启动的进程不会把 ...

  5. 【原创】python内存泄漏以及python flask框架莫名coredump

    1.python内存泄漏 今天在看服务器上的进程时,用top查的时候,发现一个一直跑的脚本程序内存竟然达到了1.6G,这个脚本我有印象,一开始仅占用20M左右,显然是内存泄漏了. 用gc和objgra ...

  6. 数据库学习之中的一个: 在 Oracle sql developer上执行SQL必知必会脚本

    1 首先在開始菜单中打开sql developer: 2. 创建数据库连接 点击左上角的加号 在弹出的对话框中填写username和password 測试假设成功则点击连接,记得角色要写SYSDBA ...

  7. BZOJ1189:[HNOI2007]紧急疏散EVACUATE(最大流,枚举)

    Description 发生了火警,所有人员需要紧急疏散!假设每个房间是一个N M的矩形区域.每个格子如果是'.',那么表示这是一 块空地:如果是'X',那么表示这是一面墙,如果是'D',那么表示这是 ...

  8. Discuz!教程之删除注释云平台JS,加快DISCUZ访问

    很多站长反应打开网站的时候有个http://discuz.gtimg.cn/cloud/scripts/discuz_tips.js?v=1一直在加载中,导致网页打开速度很慢,这个时候你可以按本文教程 ...

  9. Spring源码分析(二十二)功能扩展

    摘要: 本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 目录 一.增加SPEL语言的支持 二.增加属性注册编辑器 1. 使用自 ...

  10. 史上最详细的codeblocks安装教程!!!

    codeblocks下载地址:https://www.cnblogs.com/yinbiao/p/8489748.html 下面是codeblocks具体的安装教程: