zoukankan      html  css  js  c++  java
  • 关于select的样式

    1.select的高度

    select这类标签是最让人头疼的 因为IE是作为窗口控件 padding margin什么的 都不会生效 只能用在FF下

    这时候 设置高度后你会发现 line-height是不生效的~ 所以要采用height+padding-bottom来实现文字居中

    2.select下拉的模拟

    一个选择框的某些部分我们是可以美化的,比如字体、边框、颜色、内边距和背景颜色:
    但是烦人的下拉箭头还是保持不变。没有直接美化它的方式,但解决方案还是非常简单的,首先我们需要用一个div容器包裹在select元素外围:
    HTML code:

    <select> 
    <option>Here is the first option</option> 
    <option>The second option</option> 
    </select>

    下一步我们需要加入一些css,以确保选择框元素被以某种方式美化:

    CSS code:

    .styled-select select { 
    background: transparent; 
    width: 268px; 
    padding: 5px; 
    font-size: 16px; 
    border: 1px solid #ccc; 
    height: 34px; 
    -webkit-appearance: none; /*for chrome*/ 
    } 

    我们需要确保选择框的跨度比外围的div容器更宽,这样默认的下拉箭头就会消失

    下面是我们要用的新下拉箭头:
    我们的div容器需要被美化成新的下拉箭头出现在我们预想的位置:


    复制代码代码如下:

    .styled-select { 
    width: 240px; 
    height: 34px; 
    overflow: hidden; 
    background: url(new_arrow.png) no-repeat right #ddd; 
    } 

    当然 我们也可以 用css来模拟小三角 ,只是需要增加一些结构~

    PS:上面对选择框的模拟的原理可以同样的应用在input等让人烦恼的控件模拟中~

  • 相关阅读:
    立则存
    如何在UI控件上绑定一个变量
    欢迎大家使用www.eugene.org.cn访问我的blog
    属性与字段变量的区别
    在C#中联合Excel的Com编程入门
    我和我的土匪奶奶 全集 全 下载 txt
    大菲波数
    Hat's Fibonacci
    Fibonacci 取余,直接做超时
    How Many Fibs? 字符串转换处理
  • 原文地址:https://www.cnblogs.com/cuoreqzt/p/2790952.html
Copyright © 2011-2022 走看看