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. HTML5头部标签备忘

    DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于html 标签之前,此标签告知浏览器文档使用哪种HTML 或者XHTML 规范. 推荐使用HTML5 推 ...

  2. ML 07、机器学习中的距离度量

    机器学习算法 原理.实现与实践 —— 距离的度量 声明:本篇文章内容大部分转载于July于CSDN的文章:从K近邻算法.距离度量谈到KD树.SIFT+BBF算法,对内容格式与公式进行了重新整理.同时, ...

  3. 获取内核当前执行模块和当前发生异常地址和线程异常Handler调用步骤

    循环每个内核模块 统计模块大小 判断触发异常的地址属于那个模块.来确定模块 获取发生异常地址 nt!_EXCEPTION_RECORD +0x000 ExceptionCode : -21391605 ...

  4. Arduino101学习笔记(四)—— 数字IO

    1.设置管脚模式 //***************************************************************************************** ...

  5. 德飞莱STM32单片机学习(一)——下载环境搭建

    一.下载驱动安装. 1.手动打开CH341 文件夹(驱动程序文件夹内) ,双击安装驱动 2. 尼莫M3S 开发硬件设置 硬件需要做到以下2 点:1. USB插入USB1(COM),打开电源开关J14( ...

  6. nginx日志中文变成类型\xE9\xA6\x96\xE9\xA1\xB5-\xE6\x8E\xA8\xE8\x8D\x90的东西

    感谢 http://my.oschina.net/leejun2005/blog/106791 代码如下: public class App { public static String str2He ...

  7. Codeforces 335C Sorting Railway Cars

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  8. 树状数组 + 位运算 LA 4013 A Sequence of Numbers

    题目传送门 题意:n个数,两种操作,一是每个数字加x,二是查询& (1 << T) == 1 的个数 分析:因为累加是永远的,所以可以离线处理.树状数组点是c[16][M] 表示数 ...

  9. spring mvc 返回json

    服务器端返回的是文本,客户端得到文本后将文本转换成json就可以了,服务器端将对象转换成json 的文本形式,并且需要设定文本的类型为text/plain,charset=UTF-8 所以在 appl ...

  10. iOS之03-类的合理设计

    以下代码为了充分学习理解 类与对象 类与对象的定义 类就是将事物的共有属性和方法抽离出来形成的:类是现实世界或思维世界中的实体在计算机中的反映,它将数据以及这些数据上的操作封装在一起. 对象是具有类类 ...