package.json
<code> "react-bootstrap": "^1.0.0",
"bootstrap": "^4.4.1",
</code>
<code> "react-bootstrap": "^1.0.0",
"bootstrap": "^4.4.1",
</code>
"react-bootstrap": "^1.0.0",
"bootstrap": "^4.4.1",
our component
<code> import { FormControl } from 'react-bootstrap';
const eventLogAnalyticsStartDateForm =
(<FormControl
className='modal-input'
style={{ margin: 0, maxWidth: 225, marginRight: 3 }}
type='date'
value={eventLogDateRange.start}
onChange={(e) => setEventLogDateRange({ ...eventLogDateRange, start: e.target.value.trim() })}
name='startDate'
/>);
</code>
<code> import { FormControl } from 'react-bootstrap';
const eventLogAnalyticsStartDateForm =
(<FormControl
className='modal-input'
style={{ margin: 0, maxWidth: 225, marginRight: 3 }}
type='date'
value={eventLogDateRange.start}
onChange={(e) => setEventLogDateRange({ ...eventLogDateRange, start: e.target.value.trim() })}
name='startDate'
/>);
</code>
import { FormControl } from 'react-bootstrap';
const eventLogAnalyticsStartDateForm =
(<FormControl
className='modal-input'
style={{ margin: 0, maxWidth: 225, marginRight: 3 }}
type='date'
value={eventLogDateRange.start}
onChange={(e) => setEventLogDateRange({ ...eventLogDateRange, start: e.target.value.trim() })}
name='startDate'
/>);
our scss file
<code>.form-control:focus{
background-color:red;
p, h1, h2, h3, h4, h5, h6, span {
background-color: orange;
}
}
</code>
<code>.form-control:focus{
background-color:red;
p, h1, h2, h3, h4, h5, h6, span {
background-color: orange;
}
}
</code>
.form-control:focus{
background-color:red;
p, h1, h2, h3, h4, h5, h6, span {
background-color: orange;
}
}
We are trying to change the text background color from blue to another color, however the only thing we are able to update is the form control’s background color. We cannot get the background-color: orange to work for the text. How can we updateo our css to change the blue to another background color?