The Ultimate Guide to React-Bootstrap Form Control Border, Hover, and Focus Color

React-Bootstrap Form Control components are used in combination with other components. In this tutorial I will customize form control border, hover, and focus color when the component is inside of an Input component.

Bootstrap has built-in classes that we can use to control this styling. These classes are available in vanilla Bootstrap and React-Bootstrap.

Here’s what we will build:

Full code for this tutorial is in the Resources section.

How to Change React-Bootstrap Form Control Border Color

There are two easy ways to customize the border color of a React-Bootstrap form control inside an Input component:

• Add a border color utility class like border-primary or border-secondary
• Customize the form-control class that is applied by default to the form control element

I will show how to add custom border color using both methods.

Here is example code for adding a border utility class to the form control component:

<InputGroup
>
  <Form.Control className="border-danger" />
</InputGroup >

This applies a border color and border opacity based on default Bootstrap style variables. However, if we use a border color utility like border-danger, it adds !important. This makes it difficult to add hover styling.

Instead, we can customize the form-control class that is used to render the Form Control component. I did not add this class, Bootstrap does so automatically. We can still use the default Bootstrap style variables when we customize this class:

.form-control {

  border-color: $danger;
}

Now we have the same border color styling as we did when we used the border-danger utility class, but it no longer has !important blocking our ability to add hover and focus border color later.

One more style we can add is opacity. In the code above, the opacity is 1 by default. If we want to change that, we can use Bootstrap opacity classes:

<InputGroup>
  <Form.Control className="border-opacity-50" />
</InputGroup >

Then if desired we can use the auto-generated --bs-border-opacity variable in our border color:

.form-control {
  border-color: rgba($danger, var(--bs-border-opacity));

}

Notice how that works in dev tools:

Here’s how to get, set, and apply default values to the form control.

How to Change React-Bootstrap Form Control Border Color on Hover

The React-Bootstrap form control component inside an input component has no hover styling by default. However, we can add hover styling by targeting the form-control class with a hover selector:

.form-control:hover {
  border-color: adjust-color($color: $danger, $lightness: 20%);
}

In this code I have lightened the color provided by the Bootstrap $danger SCSS variable. This makes for a nice hover effect where the border gets lighter on mouse over events.

Remember that if you applied the border-danger class or another default border color utility class to the form control component, it will apply !important to the border color style. In that case, you need to add important to the border color styling applied by your :hover pseudo-class selector.

Here’s a great demo on React-Bootstrap hover effects.

How to Change React-Bootstrap Form Control Border Color on Focus

Here’s the default focus styling for React-Bootstrap form control:

Notice that there are a couple of stylings applied: color, background-color, border-color, outline, and box-shadow. The outline styling is set to 0, so we will focus on border-color and box-shadow.

Here’s the code to customize React-Bootstrap form control border and box shadow focus styling:

.form-control:focus {
  box-shadow: 0 0 0 0.25rem adjust-color($color: $danger, $lightness: 40%);

  border-color: adjust-color($color: $danger, $lightness: 30%);
}

Here’s the result of our code when focused on the form control but the component is not hovered:

It’s hard to tell in the screenshot, but the border is slightly darker than the box-shadow outline effect.

Once again, if we use a border color utility on the form control then we will need to use !important in the focus selector. That’s why I sometimes avoid the utilities based on my styling needs.

Here’s how to create a notched effect in the React-Bootstrap Input and Form Control combo component.

Bootstrap 5 Remove Form Control Focus Outline

We can easily remove the focus outline, also known as box shadow, from the React-Bootstrap form control with the following code:

.form-control:focus {

  box-shadow: 0 0 0;

}

Here’s the result:

Remember I still have a custom border color on focus in the above example.

Resources

Bootstrap has great border width utility classes for styling components like the form control.

Here’s a tutorial on custom sizing the form control.

Here’s the code for this demo:

//CustomBorderInput.scss

@import "bootstrap/scss/bootstrap";

.form-control {
  //border-color: rgba($danger, var(--bs-border-opacity));
  border-color: $danger;
}

.form-control:hover {
  border-color: adjust-color($color: $danger, $lightness: 20%);
}

.form-control:focus {
  box-shadow: 0 0 0 0.25rem adjust-color($color: $danger, $lightness: 40%);
  //box-shadow: 0 0 0;
  border-color: adjust-color($color: $danger, $lightness: 30%);
}

//CustomBorderInput.tsx

import React from "react";
import InputGroup from "react-bootstrap/InputGroup";
import Form from 'react-bootstrap/Form';

import "./CustomBorderInput.scss";

export default function CustomBorderInput() {

  return (
    <InputGroup>
      <Form.Control />
    </InputGroup >
  )
}