zoukankan      html  css  js  c++  java
  • 为select 设置样式

    问题:

      在为表单添加下拉菜单时,有时候对菜单的样式没有特别的要求,就是需要修改下select元素的宽度和高度,但众所周知select元素的样式很难修改;

    select在各个浏览器,字体大小为14px时的高度为20px

      希望是这样的,对边框样式也什么需求

      

      但在IE7,IE8下的表现确实这样的

      

    差别有点明显,遂在select上设置line-height怎么都没有用,查看各个浏览器(没有测试safari和opera浏览器)设置line-height:对select的高度都没有什么影响;

    解决办法:

      此方法不适用IE7及以下浏览器

      为了select也浏览器中有统一的高度,只给select元素设置padding来增加高度,对字体大小有限制的可以合并使用padding, font-size;从而达到统一的高度;

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <title>Bootstrap 101 Template</title>
    	<style>
    		select{200px; padding:20px 0; *height:60px/*为IE7设置高度*/}
    	</style>
      </head>
      <body>
      <form>
    	<select>
    		<option value="0">人民币</option>
    		<option value="0">美元</option>
    		<option value="0">越南盾</option>
    		<option value="0">法郎</option>
    	</select>
      </form>
      </body>
    </html>

    总结:

    对select高度有影响的CSS属性:height, padding, font-size, zoom

  • 相关阅读:
    详解JavaScript中的闭包
    Javascript中的apply与call
    JS中for循环变量作用域
    KEEP!
    弹性盒子模型
    JS继承的原理、方式和应用
    js
    JS时间格式和时间戳的相互转换
    Jquery的简单API
    js中判断数组中是否包含某元素的方法
  • 原文地址:https://www.cnblogs.com/zhang-jian/p/5264144.html
Copyright © 2011-2022 走看看