css - 选择选项在 Mozilla Firefox 上是透明的
问题描述
我使用带有土地标志的语言切换器作为选择背景,当语言改变时会改变。
一切都按预期工作,但在 Mozilla Firefox 上,选项是透明的,除了悬停。我找不到任何东西来解决它。
我做了一个stackblitz,所以你可以更好地看到问题:(图像不是好的,这就是为什么它呈现“丑陋”) https://stackblitz.com/edit/angular-u5jgzt
感谢您帮助我/分享我可以帮助我的链接。
app.component.ts 从'@angular/core'导入{组件};
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
/**
* define the current language in the app
*
* @type {('français' | 'english')}
* @memberof LangSwitcherComponent
*/
currentLang: 'français' | 'english' = 'français';
/**
* Change the translation language
*
* @param {*} event
* @memberof LangSwitcherComponent
* @returns {void}
*/
changeLang(): void {
this.currentLang = this.currentLang === 'français' ? 'english' : 'français';
}
}
app.component.css
select {
-webkit-appearance: none;
-moz-appearance: none;
height: 21px;
width: 21px;
border-radius: 100%;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Flag_of_France_%281794%E2%80%931815%2C_1830%E2%80%931958%29.svg/250px-Flag_of_France_%281794%E2%80%931815%2C_1830%E2%80%931958%29.svg.png');
background-size: cover;
border: 1px solid #fff;
color: transparent;
cursor: pointer;
}
select.en {
background: url('https://upload.wikimedia.org/wikipedia/commons/f/f2/Flag_of_Great_Britain_%281707%E2%80%931800%29.svg');
background-size: cover;
}
select option {
background-color: white;
padding: 10px;
}
p {
font-size: 15px;
line-height: 19px;
margin: auto;
margin-top: 1px;
}
解决方案
您还需要在选项中指定颜色 CSS
select option {
color: black;
}
推荐阅读
- c# - 两个日期之间的 C# 时间段(以周为单位)
- elasticsearch - Elasticsearch + searchkit basicauth - 联系 ES 时得到 401 Unauthorized
- node.js - 使用生成器和承诺的 nodejs 函数式编程
- ios - Swift UITest 处理所有测试的开始和所有测试用例的结束
- gnupg - 如何恢复 gpg 密钥?
- c# - 在单元测试中强制 DbContext 在 SaveChanges() 上抛出异常
- python - ffmpeg - 轮询文件夹中的文件,并使用 rtp 作为视频流
- java - 添加一些新标签后,在 selenium webdriver 中重新加载 DOM 元素
- cucumber - 我想在运行我的 Cucumber 测试之前运行一组 sql 脚本并启动服务器,最好的方法是什么
- node.js - electron-builder,如何设置节点环境变量