<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>利用css新属性appearance优化select下拉框</title>
<style type="text/css">
body{ padding:100px;}
select{ border:1px solid #ccc;
padding-right:30px;
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
background:url(images/ico.png) no-repeat right center;
}
select::-ms-expand {
display: none;
}
</style>
</head>
<body>
<select>
<option value="ec3bd039-f3a5-e411-8154-5404a6f3ab2f">所有分类</option>
<option value="bbf39f6f-f4a5-e411-8154-5404a6f3ab2f">食品</option>
</select>
</body>
</html>

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

 

利用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. A. Initial Bet(Codeforces Round #273)

    A. Initial Bet time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  2. virtio-netdev 发送数据包

    在前面几文中已经大体介绍了virtio的重要组成,包含virtio net设备的创建,vring的创建,与virtio设备的交互方式.我们就从网络数据包的发送角度来看下virtio的详细使用流程. [ ...

  3. 自定义DB连接池实现

    实现一个简单的数据库连接池 1,连接池接口 package dbsource; import java.sql.Connection; import java.sql.SQLException; /* ...

  4. Xaml于string(弦)定义常量和处理空间

    xml version="1.0" encoding="UTF-8"? > (1)基本使用方法 xaml中能够实例化各种对象,比方在ResourceDic ...

  5. HDU 5052 LCT

    Yaoge's maximum profit Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/ ...

  6. 《Pro Android Graphics》读第三季度票据

    Android Frame Animation: XML, Concepts and Optimization Frame Animation Concepts: Cels, Framerate, a ...

  7. Java设计模式菜鸟系列(十四)代理模式建模与实现

    转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/39856435 代理模式(Proxy):代理模式事实上就是多一个代理类出来,替原对象进行一些 ...

  8. UML部署图和图九组件图

    前言     UML大部分描写叙述了逻辑和设计方面的信息.实现图用来描写叙述实现方面的信息.实现图包含部署图和构件图. 构件图     1. 概念      构件图从软件架构的角度来描写叙述一个系统的 ...

  9. Shell学问: 调用脚本之间

    于Java,Python于,您可以使用import该方法使脚本或模块之间的呼叫,例如: >>> import math >>> math.sqrt(4) 2.0 在 ...

  10. 类似的微博推断客户关系sql声明

    类别似新浪微博的关注和共同关心 不知道别人是怎么设计的. 反正我是例如以下设计的 ID   USER   FRIEND 1     A         B 2      B         A 3   ...