CODEWITHSUNDEEP
semantic-ui-react
BarefootDev
BarefootDev

Reputation: 346

Semantic React Dropdown with search prop prevents styling

I'm changing the color of a dropdown's caret with

.myclass .ui.dropdown {
    color:transparent!important;
}

This hides the caret, as expected, however not when I send the prop 'search' to the Dropdown component.

Has anyone faced this?

I've tried these alternatives 

.myclass .ui.dropdown.search
.myclass .ui.search.dropdown
.myclass .ui.search

I also need to change it this way, rather than with icon=null, because I want to show the caret on hover with 

.myclass .ui.dropdown:hover {
    color: white!important;
}

Thanks in advance.

Upvotes: 1

Views: 56

Answers (1)

BarefootDev
BarefootDev

Reputation: 346

Answering my own question, shouldn't have given up so quickly. Leaving the post up for others:

SOLUTION: 

.myclass .ui.dropdown i {
    color:transparent!important;
}
.myclass .ui.dropdown:hover i {
    color:white!important;
}

Although this doesn't explain why the search prop changes things, it works.

Upvotes: 2

Related Questions