select框默认样式去除(ie中隐藏默认下拉图标)

html代码

 

1  <select class="info-select">
2        <option selected="selected">1</option>
3        <option>2</option>
4  </select>
css代码
 /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
          select::-ms-expand { display: none; }          
         .info-select{
            width: 12%;
            margin-left: 64%;
            border: none;
            outline: none;
            /*将默认的select选择框样式清除*/
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
            -ms-appearance:none;
           /*在选择框的最右侧中间显示小箭头图片*/
           background: url(../img/arrow.png) no-repeat scroll right center transparent;           
         }

转载于:https://www.cnblogs.com/vanstrict/p/4979934.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使 `<select>` 下拉选择样式更加好,可以使用 CSS 来自定义其外观。下面是一些常用的 CSS 样式属性,可以应用于 `<select 元素来改善其观: ```css select { /* 设置选择的宽度和高度 */ width: 200px; height: 40px; /* 设置字体样式 */ font-family: Arial, sans-serif; font-size: 16px; /* 设置背景颜色和边样式 */ background-color: #f2f2f2; border: none; border-radius: 5px; /* 设置下拉箭头的样式 */ appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("dropdown-arrow.png"); background-position: right center; background-repeat: no-repeat; padding-right: 25px; /* 设置鼠标悬停时的样式 */ transition: background-color 0.3s ease; } select:hover { background-color: #e6e6e6; } select:focus { outline: none; } ``` 在上面的代码,我们使用了一些常见的 CSS 样式属性来改善 `<select>` 元素的外观。你可以根据需要进行修改和调整。 `width` 和 `height` 属性用于设置选择的宽度和高度。 `font-family` 和 `font-size` 属性用于设置选择文字的字体和字号。 `background-color` 属性用于设置选择的背景颜色,`border` 属性用于设置选择的边样式,`border-radius` 属性用于设置选择的圆角半径,通过调整这些值可以改变选择的形状。 `appearance` 和 `-webkit-appearance`、`-moz-appearance` 属性用于隐藏默认下拉箭头样式,然后使用自定义的背景图片来代替。通过调整 `background-image`、`background-position` 和 `padding-right` 属性,可以设置自定义的下拉箭头样式。 `transition` 属性用于设置鼠标悬停时的过渡效果,`:hover` 伪类选择器用于指定鼠标悬停时的样式,`:focus` 伪类选择器用于指定选择获取焦点时的样式。 将上述 CSS 代码应用到 HTML 文档的 `<select>` 元素,例如: ```html <select> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> ``` 通过自定义 CSS 样式,你可以使 `<select>` 下拉选择的外观更加好看。记得将 CSS 代码放置在 `<style>` 标签或者外部的 CSS 文件,并在 HTML 文档引入。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值