Bootstrap 5 - change focus color

[kareninstructor]

Why change the focus color of input controls? To match the theme of a web application.

jsfiddle example which matches the screenshot below

Place the following in a .css file

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

input {
  margin-bottom: 10px
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* FOCUS STYLING - Bootstrap will override some of these */
a:focus,
.form-control:focus,
input[type=radio]:focus,
.btn:focus {
  outline-color: cornflowerblue;
  outline-width: 1px;
  outline-style: solid;
}

/* FOCUS STYLING - Bootstrap to use in tangent with above */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: rgba(25, 135, 84, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(25, 135, 84, 0.6);
  outline: 0 none;
}


/* Makes it clear that a button has focus */
.header-nav--nav .header-nav--main .form-inline .btn-default:focus,
form button.btn:focus {
  background-color: cornflowerblue;
  color: #ffffff;
}