CODEWITHSUNDEEP
cssreactjssemantic-ui
John Seed
John Seed

Reputation: 387

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.

Upvotes: 1

Views: 1284

Answers (1)

KuldipKoradia
KuldipKoradia

Reputation: 3031

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

Upvotes: 1

Related Questions