The Bootstrap form input control is not updating its background and border color as expected

Recently, I decided to revamp the look of the input controls on my website. I made some changes in the code like so:

//Updating bootstrap variables
$input-bg: $background-color;
$input-color: yellow;
$input-border-color: $gray-500;
$input-focus-border-color: $primary;
$input-placeholder-color: $gray-600;

//Adjusting background
.form-control
.form-control:active,
.form-control:focus,
.form-control:focus:active {
  background-color: $input-bg;
}

However, after implementing these changes, I noticed some unexpected behaviors. When the form is loaded with pre-filled data, the background color appears different. Additionally, while typing in the input field, the text color is gray, but upon leaving the input, it turns yellow.

I'm puzzled about what could be causing these color discrepancies. Any insights or suggestions on how to ensure consistent background and text colors?

https://i.sstatic.net/tYAbS.png

cssbootstrap-4sass

Answer №1

To customize the background of chrome autocomplete input boxes

/* Modify the default white background to a different color */
       input:-webkit-autofill,
       input:-webkit-autofill:hover, 
       input:-webkit-autofill:focus, 
       input:-webkit-autofill:active{
          -webkit-box-shadow: 0 0 0 30px white inset !important;
       }

For ensuring the text color matches the background, utilize :active and :focus on the corresponding input field.

Answer №2

Give it a shot by adding "!important" to the CSS

.form-control
.form-control:active,
.form-control:focus,
.form-control:focus:active {
  background-color: $input-bg!important;
}

Answer №3

You seem to have overlooked the need for a comma in your code. The correct format should be:

//Set the background color
.form-control,

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

Attempting to create an OutlinedInput with a see-through border, however encountering strange artifacts

https://i.sstatic.net/PL30l.png Struggling to achieve a TextField select with outlined variant and a see-through border. Here's the current theme override I'm using: overrides: { MuiOutlinedInput: { root: { backgroundColor: &ap ...

cssmaterial-uijss

how to display a font awesome icon within an option element using bootstrap

When iterating through options, I aim to display a check and times icon with each option. However, my code does not seem to be displaying the icons as expected: @foreach($findadminproducts as $a) <option value="{{ $a->id }}" >{{ $a-& ...

laravelbootstrap-4iconsstyles

Tips for creating the appearance of a resizable element

My goal was to replicate the resizing and moving functionality of elements in Adobe Illustrator using CSS alone. Unfortunately, I couldn't find any useful resources on how to achieve this. ...

cssresizecontrolsoutline

Show off a sleek slider within a Bootstrap dropdown menu

Is there a way to display a sleek slider within a Bootstrap dropdown element? The issue arises when the slider fails to function if the dropdown is not open from the start, and the prev/next buttons do not respond correctly. For reference, here is my curr ...

javascriptjquerycssbootstrap-4slick.js

Elements appear with varying widths in Firefox compared to Webkit-based browsers

I believe it would be simpler for you to inspect the elements rather than me writing the code, so I have provided a link: music band site. Now onto the issue: When the window width is reduced in Firefox, you will notice that the social icons in the yellow ...

htmlgoogle-chromefirefoxcss

Clicking on an element deactivates its hover state

While experimenting on this JSFiddle, I noticed that after clicking one of the boxes, the hover state becomes inactive and doesn't show up again. These three boxes have their background set using css background-image. The click event is attached usin ...

jquerycssclickhover

The progress bar is visually enhanced with a border style that doubles as a background color

While experimenting with a jsfiddle to create an animated progress bar, I stumbled upon something peculiar. I had a single CSS rule applied to the progress tag: progress { border:2px solid #ccc; } Prior to adding this CSS rule, the progress bar looke ...

htmlcss

Having trouble with Floating Labels in Bootstrap 5

Having trouble with my floating labels - any advice? https://i.sstatic.net/fk0CG.png Here is the code snippet: <div class="form-floating mb-3"> <input type="text" class="form-control" autofocus id="txtNome" placeholder=" "> <la ...

htmlcssbootstrap-5

Difficulty arises with z-index when hover effects are applied to clip-path shapes

I'm encountering an issue where I am attempting to make two clip path polygons overlap each other when hovered over by the mouse. I have been using z-index values and trying to adjust them based on which overlay is being hovered over, but unfortunatel ...

htmlcssz-indexclip-path

Arrange containers into a tower?

Currently, I am exploring the concept of stacking boxes. While I have a solid grasp on how to stack them vertically from top to bottom, I find myself puzzled about how to stack them horizontally. Check out my vertical stacking method here See how I a ...

htmlcss

Use jQuery to permit only numeric characters and the symbol "-" to be entered into a textbox

I have been working on a JQuery script that only allows users to input numbers in a text field. However, I am now trying to modify the code to also allow users to enter "-" (hyphen), but so far it's not working as expected. If anyone can provide assis ...

javascriptjqueryhtmlcss

iOS exhibits a flashy display of Material Select lighting up

In my attempt to develop a website using Material Design, I encountered an issue with the Material Select component. Whether I utilize MDB (Material Design for Bootstrap) or the Materialize CSS framework, both function well on Windows/OSX/Android devices. ...

ioscsstwitter-bootstrapmaterial-designmaterialize

Cannot populate Kendo Menu with images due to dataSource imageUrl not recognizing the content

I have integrated Kendo controls into my application, specifically a Menu control with a datasource in my controller. Currently, I am passing the relative path of URL for imageUrl. However, as the application has grown, there are multiple calls being made ...

cssangularjskendo-uiiconskendo-menu

remove CSS attribute from the JavaScript DOM properties

Can someone help me figure out what's wrong with my code? I need to remove all "link" tags with the attribute "rel = "stylesheet" Here is the HTML code I am working with: <html> <head> <title>teset</title> <meta charset="u ...

javascripthtmlcss

Tips for updating the color of a table row when it is chosen and a row is inserted using ajax

I have successfully added table rows dynamically through ajax in MVC C#. Now, I am looking to change the color of a selected row. This effect works well on the table with rows generated in the HTML view. <div class="col-lg-6 col-sm-12"> ...

c#jquerycssajaxasp.net-mvc

Issues persisting with the fixed header functionality in Bootstrap table

I implemented a table using bootstrap-table in my project. Everything seems to be working fine except for the scroll bar within the tbody. For some reason, the scroll bar is not appearing. Can anyone point out what I might be missing? I believe that if th ...

csstwitter-bootstrapbootstrap-table

What is the best way to ensure that all buttons remain fixed at the bottom of the div?

I am facing a challenge with 4 buttons in 4 different cards that have varying text sizes. I need to ensure that the buttons stay at the bottom regardless of the amount of text I input in the cards. <div class="pricing-block"> <div cla ...

htmlcss

Alignment Woes in Bootstrap Designs

I'm seeking assistance regarding the alignment of content on my webpage. The content is not aligning properly with the sidebar and footer, and I'm unsure how to proceed. The page should have a left margin to avoid touching the sidebar, and the fo ...

htmlcssbootstrap-4

How to achieve a gradual border or box-shadow transition from thick to slim using CSS

Is there a way to achieve the design shown in the image below? I am looking for a thick top border that gradually becomes thinner as it reaches the sides and seamlessly merges into the black block. https://i.stack.imgur.com/gmjQh.png Here is my CSS code ...

css

Enhancing navigation functionality using CSS

I have two separate pages with navigation included in both. This way, it's easier to edit the navigation menu once instead of doing so on each page individually. However, I am now facing uncertainty on how to implement the 'active' class usi ...

htmlcsstwitter-bootstrap