I'm using Formik for validating some fields when creating an entity, one of the fields must be a Select.
Here is the code:
const industryOptions = [
{ text: 'Food', value: 'Food' },
{ text: 'Services', value: 'Services' },
{ text: 'Transport', value: 'Transport' },
{ text: 'Software', value: 'Software' },
];
<Field
className="hello-dropdown-create"
name="industry"
as={Select}
selectOnBlur={false}
options={industryOptions}
placeholder="Food service"
onChange={(e, selected) =>
setFieldValue('industry', selected.value)
}
/>
The problem is with the placeholder. I want its text to have a different color, I don't think it is possible to add a css class just for the placeholder in this case, so I was thinking to add an extra option in the dropdown and set it as the first option and make it disappear after the dropdown is opened and an option is selected:
const industryOptions = [
{ text: 'select one', value: 'select one' }, // added extra option here
{ text: 'Food', value: 'Food' },
{ text: 'Services', value: 'Services' },
{ text: 'Transport', value: 'Transport' },
{ text: 'Software', value: 'Software' },
];
Is it possible to set something like <option value="" disabled selected hidden>select one</option> ?
Or other solution to make the text of the placeholder gray and when an option is selected to be black?