I'm using Semantic UI dropdowns in my React application to create dropdowns like the one here in their documentation: https://react.semantic-ui.com/modules/dropdown/#types-selection
The default text is set to "Select Friend", and by default the text is semi-transparent. I'm trying to figure out how to modify the style of this component so that the default text is no longer transparent.
First of all I want to know you that the default text is not semi-transparent.
There is a CSS property for that default text in semantic.min.css as follow.
.ui.default.dropdown:not(.button)>.text, .ui.dropdown:not(.button)>.default.text {
color: rgba(191,191,191,.87);
}
You can override this CSS property by applying the following code in your custom CSS file.
.ui.default.dropdown:not(.button)>.text, .ui.dropdown:not(.button)>.default.text {
color: rgba(0,0,0,.87) !important;
}
