美文网首页css的相关知识
默认下拉框select美化

默认下拉框select美化

作者: 灵籁 | 来源:发表于2016-03-17 14:55 被阅读7229次

默认的select下拉框，样子丑，并且在各个浏览器的样子还不一样。所以需要美化。当然，要完全兼容的话，改起来会很费事，这时就建议你自己模拟了，或找相关插件。比如jquery插件啊，js插件等等. 这里主要介绍默认下拉框美化方法。

思路：
重置select 默认下拉框样式，用自定义的图片覆盖默认下拉三角按钮。如果低版本ie9以下的话，建议套个外层div（overflow-x: hiddden），让select超出外层宽度隐藏。

关键代码：

dom结构：

<div class="button custom-select">
  <select>
    <option value="选择1" selected="selected">Connecticut</option>
    <option value="选择2">New York</option>
    <option value="选择3">Maryland</option>
    <option value="选择4">Virginia</option>
  </select>
</div>

css：

select{    
  border: solid 1px #ccc;    
  appearance: none;/*清除select下拉框默认样式*/    
  -moz-appearance: none;    
  -webkit-appearance: none;   
  padding-right: 14px;/*为下拉小箭头留出一点位置，避免被文字覆盖*/    
  background: url("img/arrow.png") no-repeat scroll right center transparent;/*自定义图片覆盖原有的下三角符号*/
}
select::-ms-expand {    
  display: none;/*清除IE默认下拉按钮，但是测试发现IE10以上有效，IE8，9默认下拉按钮仍旧存在*/
}

参考：

相关文章

  • 默认下拉框select美化

    默认的select下拉框，样子丑，并且在各个浏览器的样子还不一样。所以需要美化。当然，要完全兼容的话，改起来会很费...

  • Jquery设置下拉框select中的option选中

    Jquery对下拉框select默认选中和获取下拉框中值的。当select元素的值发生改变时,会发生触发chang...

  • html+css巧妙应用

    一、select 用遮盖层去默认倒三角的时候，可以改改select的size，让select显示选择下拉框。 也可...

  • 解决 el-select 设置默认值后无法切换选项

    给form表单里面的 el-select 下拉框设置一个默认值，但是当下拉框重新选择时，页面下拉框的值却不变， 原...

  • Vue element el-select 设置默认选中

    为了防止用户漏操作传入空值数据，在select下拉框中设置默认选中值。 定义可选择的下拉框内容 在页面初始化时自动...

  • selenium之定位下拉框（Select）

    1. 定位