Customize bootstrap 5 inputs to be dark-CodePudding

In my application, I can switch between light and dark modes. I am using Bootstrap 5 form-control inputs, and I would like to change their background color accordingly.

What are the CSS classes I should target to get this to work?

So far I have managed to change the background colors of the inputs, but when the control is active, the color reverts back to white.

.form-control{
    background-color: rgb(45, 52, 61);
}

CodePudding user response：

Okay, so the answer was actually very simple. Just never thought of it.

Basically, you should add another CSS rule that targets when the element is in focus.

.form-control{
    background-color: rgb(45, 52, 61);
}

.form-control:focus{
    background-color: rgb(45, 52, 61);
}

CodePudding user response：

Instead of manually overriding Bootstrap CSS you can use the bg-dark and text-white classes to your inputs. See more about Bootstrap utilities below:

Bootstrap 5 Utilities - Colors

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div >
  <form>
    <div >
      <label for="exampleInputEmail1" >Email address</label>
      <input type="email"  id="exampleInputEmail1" aria-describedby="emailHelp" value="[email protected]">
      <div id="emailHelp" >We'll never share your email with anyone else.</div>
    </div>
    <div >
      <label for="exampleInputPassword1" >Password</label>
      <input type="password"  id="exampleInputPassword1">
    </div>
    <div >
      <input type="checkbox"  id="exampleCheck1">
      <label  for="exampleCheck1">Check me out</label>
    </div>
    <button type="submit" >Submit</button>
  </form>
</div>