Transform the look of your bootstrap 5 inputs by making them dark-themed

I have a feature in my app that allows users to switch between light and dark modes. Currently, I am using Bootstrap 5 form-control inputs and want to customize their background color based on the mode selected.

Which CSS classes do I need to target in order to achieve this effect?

While I have successfully changed the background colors of the inputs, I am encountering an issue where the color reverts back to white when the control is active.

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

Answer №1

Enhance your inputs effortlessly by utilizing the bg-dark and text-white classes instead of manually overriding Bootstrap CSS. Find out more about Bootstrap utilities here:

Bootstrap 5 Utilities - Colors

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525f5f44434442514070051e021e03">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container">
  <form>
    <div class="mb-3">
      <label for="exampleInputEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control bg-dark text-white" id="exampleInputEmail1" aria-describedby="emailHelp" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="315f505c54715449505c415d541f525e5c">[email protected]</a>">
      <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
    </div>
    <div class="mb-3">
      <label for="exampleInputPassword1" class="form-label">Password</label>
      <input type="password" class="form-control bg-dark text-white" id="exampleInputPassword1">
    </div>
    <div class="mb-3 form-check">
      <input type="checkbox" class="form-check-input bg-dark" id="exampleCheck1">
      <label class="form-check-label" for="exampleCheck1">Check me out</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

Answer №2

Wow, I can't believe how straightforward the solution turned out to be. It never crossed my mind.

All you need to do is include an additional CSS rule that targets the focused state of the element.

.field {
    border: 2px solid rgb(87, 110, 123);
}

.field:focus {
    border: 2px solid rgb(87, 110, 123);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate a comma after the second or third digit to separate currency values in JavaScript

Is there a way to add commas to currency values at the 3rd or 2nd place depending on the value itself? The desired output format is: 1000 => 1000 10000 => 10,000 210000 => 2,10,000 2010000 => 20,10,000 12010000 => 1,20,10,000 I am currentl ...

javascriptphphtmlcss

Creating a dynamic table in AngularJS that can add rows and columns with cyclic values

Seeking assistance for a programming challenge. I have created a form with 2 input fields for specifying the dimensions of a table (number of rows and columns), along with a button. When this button is clicked, the table should be dynamically populated wit ...

javascriptjqueryhtmlangularjs

Troubleshooting CSS navigation bar hamburger dilemma

Currently, I am facing an issue with a toggle button on my website. When I click on the hamburger menu, the navigation bar does not show up even though the toggle feature is working perfectly fine. I have tried combining different sources to solve this pro ...

htmlcsshamburger-menu

Image flipping effect malfunctioning in Safari and Internet Explorer

My image flipping effect is not functioning properly in Safari and IE browsers. Here is the code I am using: .flipcard { position: relative; width: 220px; height: 220px; perspective: 500px; margin: auto; text-align: center; } .flipcard.v:hove ...

javascriptjqueryhtmlcss

Opacity error with jQuery slider specifically affecting Google Chrome browser

My Magento site features a custom-built slider that is both responsive and has unique touch behavior. The desired behavior for the slider is as follows: A three-image slider where the middle image has an opacity of 1.0, while the other two images have an ...

javascriptjqueryhtmlcssgoogle-chrome

Customizable trapezoid in SVG format with adjustable points relative to one another and the option to add gradients

I have explored numerous options while searching for a way to create a responsive, full-width trapezoid with a gradient but have come up short. Using SVG, I was able to get close to the desired shape, but encountered problems when the trapezoid's dime ...

csssvgpolygongradientresponsive

Text randomly appears on the html page

I've been dedicating a significant amount of time to finding a solution, but haven't had any luck. I'm aiming to create a visual effect where 10 words with varying font sizes slide in from different directions on a canvas within my document ...

javascripthtmlcsscanvashtml5-canvas

Utilizing Bootstrap 4: The Use of an anchor tag in a button element

I am facing a situation where I have an icon represented by the HTML code <a>, which acts as a link redirecting to a different page. This <a> is nested inside a collapsible button, meaning that clicking on the icon expands the menu before actua ...

htmlcssbootstrap-4

Large button in Bootstrap 3 breaks out of Jumbotron on smaller mobile screens

I have set up my layout with a Jumbotron that features a prominent call-to-action button. <a href="#" class="btn btn-lg btn-success">Let's Purchase Something Elegant</a> However, when viewed on an XS mobile screen, the button extends bey ...

csstwitter-bootstraptwitter-bootstrap-3

Guide on how to retrieve additional data from the API by pressing the "Load More" button

Hello, I am working on a project where I aim to display user data from an API called https://reqres.in/api/users?page=(the page number can be 1,2 or more) and present it in an HTML table using JavaScript with promises. Currently, I have successfully popula ...

javascripthtmlrenderinges6-promise

Ways of incorporating text in a parallelogram shape

Here is the HTML code with ID attributes applied to both divs: <div id="herotext"> <div id="banner"></div> <h1 id="maintitle">Hey, I'm Charlie</h1> <p>This websi ...

htmlcss

What circumstances could lead to Chrome's autofill feature ceasing to function?

Currently, we are in the process of developing a new website that utilizes HTML5. While everything validates correctly, we are encountering issues with the LESS stylesheets and Facebook tags. Particularly, Chrome's autofill feature is not functioning ...

htmlgoogle-chrome

Difficulty encountered while using MySQL column update button

I'm looking for assistance in updating my database using an SQL statement after a button is clicked on the website. I attempted something but it was unsuccessful. Could anyone provide guidance? Here's the code snippet: http://pastebin.com/D0S83Jg ...

phphtmlmysqlbutton

creating folding effect using javascript and css with divs

I've been searching high and low on the internet for a solution like this, but so far I haven't had any luck. It seems like there might be a JavaScript script out there that dynamically changes the css -webkit-transform: rotateY(deg) property. ...

javascriptjquerycsscarousel

I'm having trouble grasping the concept of margin collapse in this particular example

It's clear why the margin collapses to 20px in the first example when there's a border on the outer div. However, it is puzzling how the margin collapses to zero in the second example just by removing the border from the outer div. /*First exam ...

htmlcss

The 'float' property in HTML and CSS

Good day everyone! I apologize in advance if my explanation is not very clear. Below is my code along with a link to an image that will help illustrate the issue I am facing. Here is the code snippet: <header> <div> <a href="index.html ...

htmlcss

Utilizing CSS classes to namespace pseudo-selectors

After attempting to search on Google, I am struggling to find the right keywords. I'm trying to apply a pseudo-selector only to a specific class. In this scenario, if we remove the specified class, the last Hi should appear in blue. However, my expe ...

css

Customize the style attribute in Bootstrap 4 using Popper.js

I've been attempting to adjust the position of a dropdown element, but I'm struggling to make it work. Utilizing Bootstrap 4 with Popper.js, I simply added a default dropdown without any custom styles to my page. However, it automatically applies ...

htmlbootstrap-4popper.js

What could be causing my content to unexpectedly break out of its designated div structure?

My website on Wordpress is causing me trouble. When I input text directly into the HTML/CSS structure hardcoded style, it fits perfectly. However, when I attempt to do the same thing using Wordpress <?php echo the_content();?>, it ends up breaking ou ...

csswordpresstext

The bottom section of the main page

I've successfully implemented a footer that sticks to the bottom of each page as intended. However, I'm facing an issue when there's a large amount of text on a particular page that requires scrolling. The scroll continues beyond the footer, ...

htmlcssasp.netmaster-pagessticky-footer