首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Mac上的Safari中删除select元素上的注释?

如何在Mac上的Safari中删除select元素上的注释?
EN

Stack Overflow用户
提问于 2011-10-04 01:47:40
回答 8查看 150.6K关注 0票数 135

在Mac和iOS设备上,在Safari中,

element with a background color generates a gloss over itself. This does not seem to happen in other operating systems. For example, I have a select element with these style properties: select { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 3px 6px; margin: 10px 0 7px; width: 250px; background-color: #BD2786; color: white; letter-spacing: -.04em; font-weight: bold; border: 0; } And my element has the background color I want, but the gloss is still there. Does anyone know how to make it a flat color?

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2011-10-04 01:54:48

@beanland;你必须写

-webkit-appearance:none;

在你的css中。

阅读这篇文章http://trentwalton.com/2010/07/14/css-webkit-appearance/

票数 240
EN

Stack Overflow用户

发布于 2016-08-04 18:18:51

使用-webkit-appearance:none;还将删除指示这是一个下拉列表的箭头。

请看这段代码,它可以跨不同的浏览器工作,并添加自定义箭头,而不包括任何图像文件:

select{
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
    /* and then whatever styles you want*/
	height: 30px; 
	width: 100px;
	padding: 5px;
}
Volvo
  Saab
  Mercedes
  Audi

票数 126
EN

Stack Overflow用户

发布于 2019-08-15 21:19:24

2019版本

较短的内联图像URL,仅显示向下箭头,可自定义箭头颜色...

来自https://codepen.io/jonmircha/pen/PEvqPa

作者可能是Jonathan MirCha

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;utf8,") no-repeat;
  background-size: 12px;
  background-position: calc(100% - 20px) center;
  background-repeat: no-repeat;
  background-color: #efefef;
}
票数 23
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7638677

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档