Search code examples
cssreactjssemantic-ui

Semantic UI React change style placeholder text CSS

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.

Solution

  • 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;
}