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. hdu 2516 FIB博弈

    分析请看:cxlove #include<iostream> #include<cstdio> #include<cstring> #include<algo ...

  2. [Tools] 远程登录surface字体过大解决方法

    [背景] 这两天一直远程登录surface,使用surface干活,每次分辨率超大,看着就感觉像显示驱动没装好似的,必须得找个办法来设置 [开工] 在surface上设置低一点的分辨率,成功,但是远程 ...

  3. h264 profile & level

    转自:http://blog.csdn.net/sphone89/article/details/17492433 H.264 Profiles H.264有四种profile,每个profile支持 ...

  4. OK6410移植madplay播放器,王明学learn

    对于ok6410的madplay移植主要包括三部分.声卡驱动移植,播放器的移植,以及alsa库的移植. 一.首先移植声卡驱动以及播放器 ok6410采用WM97系列的声卡芯片,要使得内核支持该驱动,首 ...

  5. 第二篇：SOUI源码的获取及编译

    源代码的获取 SOUI的源码采用SVN管理. SVN:http://code.taobao.org/svn/soui2 这里主要包含两个目录:trunk 及 third-part. trunk目录保存 ...

  6. Effective C++ 之 Item 6 ： 若不想使用编译器自动生成的函数，就该明确拒绝

    Effective C++ chapter 2. 构造 / 析构 / 赋值运算 (Constructors, Destructors, and Assignment Operators) Item 6 ...

  7. PHP 部署发布接口

    环境前提:电脑已安装wamp ① 在\wamp\bin\apache\apache2.4.9\conf\httpd.conf文件中, 修改 DocumentRoot 为当前项目路径,例如 Docume ...

  8. java导出word的6种方式（复制来的文章）

    来自: http://www.cnblogs.com/lcngu/p/5247179.html 最近做的项目,需要将一些信息导出到word中.在网上找了好多解决方案,现在将这几天的总结分享一下. 目前 ...

  9. php代码效率测试

    对于一个被加载的页面,而遇到会卡的原因 ,代码量大,为了减少一句话分析,就采用分段式判断. 从php手册了解到,使用microtime函数,具体方法可参见php手册对这函数的用法 定义get_exec ...

  10. Http协议提要

    HTTP协议提要 简单来说,HTTP就是一个基于应用层的通信规范:双方要进行通信,大家就要遵守一个规范---HTTP协议.HTTP协议从WWW服务器超文本到本地浏览器 ,可以使浏览器更加高效.HTTP ...