I have semantic UI React imported as follows
import { Form } from 'semantic-ui-react'
Now, I am using their Select Component as follows:
<Form>
<Form.Group widths="equal">
<Form.Select //I wish to change the background color of only the selected item
placeholder={"Choose Item"}
value={selectedItem}
className={classes.select}
onChange={handleItemSelectionChange}
options={
items.map((e) => {
return (
{
key: e['name'],
value: e['name'],
text: e['name']
}
)
})
}
>
</Form.Select>
</Form.Group>
</Form>
How can I change the background color and icon color of only the selected item in the Form.Select component.
Thank you.
I did not see any built-in option in their API, but you can achieve this using css, the parent div of the selected option has a class of 'selection' by default, and the option div has a class of 'divider' by default, so you can add something like this in you css -
.selection.dropdown > .divider {
background-color: red;
}
.selection.dropdown > .divider:before {
content: "";
display: block;
background: url("icon.jpg") no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
}
also you should check out the react.semantic-ui dropdown component which has more options then the select component which is just a wrapper around it.