I've been using react-bootstrap to style my elements, but I'm having trouble changing the focus color of my input type file. It always shows the default blueish border when focused. Despite trying various approaches like targeting input[type="file"]:focus in css and similar methods, nothing seems to work.
Here is how my form field looks, incorporating Formik which explains the functions like setFieldValue:
<Form.File id="imageToUpload" name="imageToUpload" type="file" custom onBlur={handleBlur}>
<Form.File.Input
accept=".jpg, .jpeg, .png"
onChange={e => {
setFieldTouched('image', true);
setFieldValue('image', e.currentTarget.files[0]);
setFilename(e.currentTarget.files[0].name);
}}
isInvalid={touched.image === true && errors.image !== undefined}
isValid={touched.image === true && errors.image === undefined}
/>
<Form.File.Label data-browse={t('common-image-selector-button-text')}>
{filename}
</Form.File.Label>
</Form.File>It's worth noting that in my css stylesheet, I have the following snippet:
.form-control:focus{
border-color: #a3c4bc;
box-shadow: 0 0 0 0.1rem #8ebdb1;
}This styling works perfectly for all other form fields except for file types.
If anyone has any suggestions or solutions, I would greatly appreciate it. Thank you in advance!