在前端开发中,下拉框是常见的 UI 组件之一,CSS 是样式控制的重要工具之一。然而,在 IE 浏览器中,下拉框样式总是会出现默认的图标,因此本文主要介绍如何使用 CSS 去掉 IE 下拉框中的默认图
在前端开发中,下拉框是常见的 UI 组件之一,CSS 是样式控制的重要工具之一。然而,在 IE 浏览器中,下拉框样式总是会出现默认的图标,因此本文主要介绍如何使用 CSS 去掉 IE 下拉框中的默认图标。
/* 去掉选择框默认图标 */ select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M15,12V5c0-0.552-0.447-1-1-1H6C5.447,4,5,4.448,5,5v7c0,0.553,0.447,1,1,1h8C14.553,13,15,12.553,15,12z M12,10.584 l-1.414,1.414l-3-3l-3,3L5.414,10L10,5.414l4.586,4.586L12,10.584z'/></svg>") no-repeat; background-position: right center; }
上面的 CSS 样式代码中,主要使用了 appearance 属性,该属性指定一个元素应该具有什么样式。在 Mozilla 和 WebKit 浏览器中,它们支持用户定义替代表单控件外观。而 appearance:none; 则表示我们要去掉下拉框的默认图标。
以上就是如何通过 CSS 在 IE 下去掉下拉框默认图标的方法。
粉丝
0
关注
0
收藏
0