How to change focus color of react-bootstrap form input file?

user_9346370 0
Viewed 1759

I am using react-bootstrap for styling my elements and I do not achieve to change the focus color of my input type file. It keeps showing the default blueish border when focus. I have tried several things like targeting input[type="file"]:focus on css and similar stuff, all of them without success.

My form field looks as follows, note I use Formik, that is why you see functions as 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 is interesting that in my css I have the following:

.form-control:focus{
  border-color: #a3c4bc;
  box-shadow: 0 0 0 0.1rem #8ebdb1;
}

And this works for the rest of the form fields. Only with file types do not work.

Any suggestion would be appreciated. Thank you in advance and regards.

react-bootstrap bootstrap-4 css
2 Answers

I can think of two ways of changing/removing the color of input on focus:

  1. Not ideal, using the !important CSS rule. This will override the focus properties of react-bootstrap.
/* -- change form control boostrap style -- */
.form-control:focus{
  border-color: #a3c4bc !important;
  box-shadow: 0 0 0 0.1rem #8ebdb1 !important;
}
  1. Ideal, using an id selector.
/* -- remove form control bootstrap style -- */
#my-form-id .form-control:focus{
  border: none;
  box-shadow: none;
  background-color: transparent;
}
user_148959850

A bit late but I just faced the same issue.

I'm using React-Bootstrap without Formik. However the way I made it work was by using the css pseudo-element '::file-selector-button'. Link: https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button

input::file-selector-button {
  background-color: black;
  color: white;
}

You can add any user interactive classes 'pseudo-class' such as :focus, :hover or ... to the attribut, resulting in following css:

input::file-selector-button:hover {
  color:#007bff
}

Pseudo-classes, link: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Hope it helps.

user_98585130
Related