1.  
  1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.  <title>利用css新属性appearance优化select下拉框</title>
  6.  <style type="text/css">
  7.  body{ padding:100px;}
  8.  select{ border:1px solid #ccc;
  9.          padding-right:30px;
  10.          appearance:none;
  11.          -moz-appearance:none; /* Firefox */
  12.          -webkit-appearance:none; /* Safari and Chrome */
  13.          background:url(images/ico.png) no-repeat right center;
  14.          }
  15.  select::-ms-expand {
  16.    display: none;
  17.  }
  18.  </style>
  19.  </head>
  20.  <body>
  21.  <select>
  22.  <option value="ec3bd039-f3a5-e411-8154-5404a6f3ab2f">所有分类</option>
  23.  <option value="bbf39f6f-f4a5-e411-8154-5404a6f3ab2f">食品</option>
  24.  </select>
  25.  </body>
  26.  </html>
  1.  

收到网上一篇文章的启发：http://www.cnblogs.com/PeunZhang/p/3522603.html

  1.  

利用css新属性appearance优化select下拉框的更多相关文章

  1. css配合js模拟的select下拉框

    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  2. 点击select下拉框获取option的属性值

    select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...

  3. 带搜索框的select下拉框

    利用select2制作带有搜索功能的select下拉框 1.引入线上css和js <link href="https://cdnjs.cloudflare.com/ajax/libs/ ...

  4. 《手把手教你》系列技巧篇（三十二）-java+ selenium自动化测试-select 下拉框（详解教程）

    1.简介 在实际自动化测试过程中,我们也避免不了会遇到下拉选择的测试,因此宏哥在这里直接分享和介绍一下,希望小伙伴或者童鞋们在以后工作中遇到可以有所帮助. 2.select 下拉框 2.1Select ...

  5. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  6. HTML中的select下拉框内容显示不全的解决办法

    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...

  7. 2.10 select下拉框

    2.10 select下拉框 本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的操作方法. 一.认识select    1.打开百度-设置-搜索设置界面,如下图所示 2.箭头所指位置,就 ...

  8. Selenium2学习（十一）-- select下拉框

    本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的操作方法. 一.认识select    1.打开百度-设置-搜索设置界面,如下图所示 2.箭头所指位置,就是select选项框,打开页面 ...

  9. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出（解决方案）

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

随机推荐

  1. linux下&quot;=&quot;号与&quot;==&quot;号

    <鸟哥的linux私房菜>基础学习篇P382中说,在bash中"="与"=="是同样的,都代表推断是否相等,仅仅只是因为其它语言一般写法使用&quo ...

  2. android学习经常使用的数据文件夹

    android工程实践 1.仿360一键清理实现(一) "一键清理"是一个桌面图标,点击图标后,显示一个视图.进行清理动画.之后显示清理了几个进程,释放了多少M内存.点击" ...

  3. 【LeetCode】Triangle 解决报告

    [称号] Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjac ...

  4. Linux：闪光的宝石，智慧 (在）

    Linux:闪光的宝石,智慧的结晶(上) 老实说,这十几天以来.因为我违反了"家规",又被断网处罚(拔掉网线).没收手机与老年证(不许出家门). 因此.我平日里仅仅能面对一篇文章& ...

  5. Android - 设置ImageView为全屏显示

    设置ImageView为全屏显示 本文地址: http://blog.csdn.net/caroline_wendy ImageView默认会适应屏幕大小, 假设想使用全屏填充, 则须要使用: and ...

  6. 单链表的实现---SingleLinkedList

    单链表的实现,定义为SingleLinkedList class Node<AnyType>{ //结点Node类 public AnyType data; public Node< ...

  7. 跟我extjs5(03--在项目过程中加载文件)

    跟我extjs5(03--在项目过程中加载文件) 上一节中用sencha工具自己主动创建了一个项目.而且能够在浏览器中查看. 如今我们来看看js类载入过程. 例如以下图所看到的: watermark/ ...

  8. linux 脚本測试网络速度

    example: ./netspeed eth0 1 #!/bin/bash 2   3 INTERVAL="1"  # update interval in seconds   ...

  9. JAVA 跑马灯文字效果

    JAVA跑马灯文字效果的实现: 1. 首先创建一个继承JFrame类的HorseRaceLightTextFrame窗体类,代码如下: package com.example.horseracelig ...

  10. Objective-C路成魔【2-Objective-C 规划】

    郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 编译执行O ...