我使用 css 来设置我的选择箭头的样式,它在 chrome 中显示了我想要的样子。但是,在 Internet Explorer 中,它同时显示默认箭头和我重新设计的箭头。我可以在 Internet Explorer 中显示任何一个,但不能同时显示两者。知道如何在 Chrome 中保持原样,但在 Internet Explorer 中将其更改为一个或另一个吗?
这是我的CSS:
select{
background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-border-radius: 0px;
appearance: none;
outline-width: 0;
}
这是它在 chrome 中的样子:
这是它在 Internet Explorer 中的样子:
更新,使用下面的 schylake 修复 - 默认箭头已消失,但希望自定义箭头移动到右侧:
最佳答案
IE 不支持该外观。有关更多信息,请参阅此。 https://www.w3schools.com/cssref/css3_pr_appearance.asp
它在 chrome 中工作的原因是因为这一行
-webkit-appearance
这适用于 IE10+。在研究同一问题时发现了这一点
select::-ms-expand {
display: none;
}
关于html - 自定义选择箭头 - Chrome 与 Internet Explorer 显示问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47141986/