语义用户界面反应更改样式占位符文本CSS

本教程将介绍语义用户界面反应更改样式占位符文本CSS的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

语义用户界面反应更改样式占位符文本CSS 教程 第1张

问题描述

我在Reaction应用程序中使用语义用户界面下拉菜单来创建与其文档中的下拉菜单类似的下拉菜单:https://react.semantic-ui.com/modules/dropdown/#types-selection

默认文本设置为"Select Friend",默认文本为半透明。我正在尝试怎么修改此组件的样式,以使默认文本不再是透明的。

推荐答案

首先,我想告诉您默认文本不是半透明的。

semantic.min.css中默认文本有一个css属性,如下所示

.ui.default.dropdown:not(.button)>.text, .ui.dropdown:not(.button)>.default.text {
 color: rgba(191,191,191,.87);
}

您可以通过在您的自定义css文件中应用以下代码来覆盖此css属性。

.ui.default.dropdown:not(.button)>.text, .ui.dropdown:not(.button)>.default.text {
 color: rgba(0,0,0,.87) !important;
}

好了关于语义用户界面反应更改样式占位符文本CSS的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。