css在给select下拉表单设置样式如边框时可以轻松搞定，而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之，则往往会出现浏览器的兼容性问题，在网上查了好多资料，最好的解决办法也是大神们用js来模拟下拉表单。额~，好吧，暂且就按照大神们的办法来解决这个问题吧。

下边来说说css如何解决select的option高度的？

有时我们在设置了select的高度后，发现其option的高度还是默认的高度，跟我们设置的select的高度大相径庭，很显然，这不是我们想要的。笔者也在网上查了资料，貌似没有查到出现这个问题的原因，如果有高手知晓，还请不吝赐教。那么要想使option的高度达到我们想要的效果该如何实现呢？废话不多说，其实很简单。

解决办法：

直接设置option的上下内边距即可，即padding-top和padding-bottom。

哈哈。。。  是不是很简单，赶快去试试吧。

至于如何设置当鼠标经过option时的背景颜色，笔者还在进一步的探索中，如果有高手知晓，还请不吝赐教。

以上解决办法，高手请飘过~~

css解决select下拉表单option高度的办法的更多相关文章

  1. ajax处理select下拉表单

    $('#gameid').change(function() { var gameid = $(this).val(); if (this.value != '') { $.ajax({ url: ' ...

  2. [Django]下拉表单与模型查询

    前言:本文主要针对自定义下拉表单制作,下拉表单的内容是取至于数据库,即动态实现下拉表单 正文: 动态实现下拉表单有两种方法: 一.自己手动写 html 模板中的 <form ...> &l ...

  3. JavaScript解决select下拉框中的内容太长显示不全的问题

    JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...

  4. cocos2d-html5 简易 下拉表单 控件

    刚才在CH5的群里问了问  有没有大侠写过 下拉表单控件啊!  没人鸟窝 ,DZ老师表示非常伤心啊  ,于是乎  自己写一个把 共享给大家. 效果图上一个  仅仅实现了一个最最主要的控件  非常eas ...

  5. CSS自定义select下拉选择框(不用其他标签模拟)

    今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...

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

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

  7. 解决select下拉框禁用（设置disabled属性）,后台获取值为空

    如果下拉框设置disabled属性后,提交表单到后台,后台获取的下拉框的值为空,以下有三种解决获取不到下拉框选项值的方法. 有下拉框html如:<select name="select ...

  8. 纯css实现select下拉框并排显示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 解决select 下拉框运行时总会有一个空值(空选项)的问题

    项目中用到很多下拉选项都会多出一个空选项,如图运行结果 总会有一个空值出现,解决办法如下: 效果如下: 添加图中框选的代码即可,我是在Angularjs中使用的,在不用框架的情况下: <opti ...

随机推荐

  1. [Spring] 事务级别定义

    记录下来,以后备用 //事务传播属性 @Transactional(propagation=Propagation.REQUIRED)//如果有事务,那么加入事务,没有的话新创建一个 @Transac ...

  2. C中的野指针—如何避免

    转自:http://www.cnblogs.com/viviwind/archive/2012/08/14/2638810.html 先看一个例子: struct student{ char* nam ...

  3. NDK-gdb

    http://www.gnu.org/software/gdb/download/ http://mhandroid.wordpress.com/2011/01/23/using-eclipse-fo ...

  4. 智能车学习（二十一）——浅谈CCD交叉以及横线摆放

    一.CCD为何要交叉摆放?       首先使用横线摆放,CCD前瞻如果远一点,弯道丢线,再远一点直接窜道.所以需要很多很多代码的工作量,而且过弯的过程相当于没有任何的调节过程,就是一个偏差保持,或者 ...

  5. SSH 小总

    SSH 为 struts+spring+hibernate的一个集成框架,是目前较流行的一种Web应用程序开源框架. 集成SSH框架的系统从职责上分为四层:表示层.业务逻辑层.数据持久层和域模块层,以 ...

  6. SoapUI之webservice接口测试（一）

    1.新建soap project 添加后出现接口内容 2.为了方便后续的测试,以防某些参数删除错了,这边需要新建测试集 3.点开新建的测试集可以发现,里面的内容跟原始测试集内容是一样的 然后就可以在这 ...

  7. NDK各版本下载

    含r8e,r9d,r10c 其中x86_64代表64位系统 官网上只有最新版下载链接,如果想要下载以前的版本,可打开 https://archive.org/web/ 然后输入 http://deve ...

  8. ubuntu使用笔记

    查看自己系统版本: 使用命令:cat /proc/version 查看:proc目录下记录的当前系统运行的各种数据,version记录的版本信息可以直接通过cat查看到,还可以看到我的gcc版本呢. ...

  9. jade学习02

    模版继承 ; block,extends ;如果是原生html文件的话,后缀html //layout.jade doctype html html head meat(charset='utf-8' ...

  10. Something about "for"

    For语句引导了一个循环语句,格式for(::),例for(int i=0;i<100;i++).类似于if()括号的作用for()括号如同if()括号一样也是一个boolean型.int i= ...