How to Customize Auto Complete Background Color of Selected Items in Bootstrap 4 Input Controls?

I'm currently struggling to figure out how to override the default white background color of a form control's autocomplete in Bootstrap. The white background doesn't align well with my dark theme.

Whenever I enter something into an input field and use autocomplete, the background turns white:

https://i.sstatic.net/EZxoV.jpg

This is not ideal; I want it to be gray instead

A similar issue occurs when selecting an item from a dropdown menu - the background turns white as shown in the image below:

https://i.sstatic.net/XYei7.jpg

https://i.sstatic.net/ffN0D.jpg

I have managed to find a solution for customizing the select dropdown list by overriding Bootstrap using CSS, as seen below:

select.form-control:focus::-ms-value {
color: #ffffff; /* Set text to white for selected item */
background-color: transparent; /* remove background color for selected item*/
}

However, I am still searching for a way to change the default background color of autocomplete from white to the gray color in line with my theme. Thank you!

cssbootstrap-4

Answer №1

The autocomplete feature in chrome gets its background styling from Webkit. To modify this, you can use the following CSS:

input:-webkit-autofill { 
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: green;
}
input:-webkit-autofill:focus { 
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: green;
}

You have the option to adjust the white background color and green font color to suit your preferences.

Answer №2

Experimenting with Chrome, I discovered a rule that affects text inputs during autocomplete:

input:-internal-autofill-selected {
    background-color: rgb(232, 240, 254) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

You may want to try implementing your own styles and observe the results.

Answer №3

To style autofill inputs, you can utilize the pseudo-class :autofill. According to Caniuse, this feature is widely supported by modern web browsers: Check here for global support

However, MDN notes various bugs associated with autofill in different browsers:

  • Chromium issue 46543: Auto-filled input text box yellow background highlight cannot be turned off (obsolete)

  • WebKit bug 66032: Allow site authors to override autofilled fields' colors. (reopened)

  • Mozilla bug 740979: implement :-moz-autofill pseudo-class on input elements with an autofilled value (open)

In addition, MDN mentions that there is no standard way to change background and text color for autofill inputs. However, a workaround exists:

    input:autofill {
        background-color: yellow;
        color: red;
        -webkit-background-clip: text;
        -webkit-text-fill-color: red;
        transition: background-color 5000s ease-in-out 0s;
        box-shadow: inset 0 0 0 20px yellow;
    }

This CSS snippet breaks down as follows:

  • background-color: yellow; Future versions may support this property
  • color: red; Potential future support expected
  • -webkit-background-clip: text; Restricts background image to within text shape
  • -webkit-text-fill-color: red; Sets text color in WebKit browsers
  • transition: background-color 5000s ease-in-out 0s;
    A temporary solution according to this post
  • box-shadow: inset 0 0 0 20px yellow;
    A workaround to set background color with a hack

View the result:

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

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

Uncertainty surrounding the inherited styling of an element in HTML

I am seeking clarification on the distinction between two methods of writing HTML code: CSS file (applies to both the first and second way): .parent{ color:red; font-style: italic; } .child_1{ color:blue; } .child_2{ color:green; } First approach ...

javascripthtmlcsselement

Using a color as a substitute for a background image on mobile devices

Is there a way to create a fallback in my CSS for changing the background image to a color when viewed on a mobile browser once the pixels reach the max-width? In the snippet below, the media query "only screen and (max-width: 600px)" works if the top bod ...

htmlcss

By employing the pseudo selector ::after, one can enhance the design

Trying to align 2 images next to each other, I am floating one left and the other right with the intention of clearing the float using the ::after pseudo selector. The surrounding text is expected to flow in between the images. I often struggle with maki ...

htmlcss

I'm looking to replicate the testimonial slider from the link provided. How can I achieve this?

I'm looking to replicate the testimonial section layout seen on Kanbanize, which features both vertical and horizontal sliders. I'm unsure of how to link the two sliders so they move in sync. I typically use Swiper for carousel/slider functionali ...

javascripthtmlcssswiper.js

The function of modal in JavaScript is not working properly

I am encountering a problem with my web page that is running on Wildfly 12. It is a simple Java EE project that I developed in Eclipse Neon. The issue arises when I try to use Bootstrap modals, as every time I attempt to open or use the methods in a JavaSc ...

javascripthtmlbootstrap-4bootstrap-modal

What is the process for loading fonts in advance?

On my website's index.html I've included the following code: <link rel="preload" href="assets/fonts/Raleway-Black.ttf" as="font" type="font/ttf" crossorigin> <link rel="preload" href="assets/fonts/Raleway-Bold.ttf" as="font" type="font/ ...

javascripthtmlcsspagespeed

Validating Dropzone JS upon submission

I'm working on a form that utilizes dropzone.js for file upload. While I'm successfully validating all the input fields, I'm facing an issue with validating the file upload before submission. I want the submission to proceed only if a file i ...

javascriptjquerybootstrap-4dropzone.js

sleek lateral scrolling reminiscent of k2.pl

I'm in the process of creating a website with a horizontal scroll similar to k2.pl. Here's what I have accomplished so far using jQuery animate and scroll: // Obtaining the X and Y axis and moving the entire page accordingly $('.scroll&apo ...

javascriptjquerycsshtml

Material-UI React Native components: Injecting Styles without Props

import {createStyles, WithStyles} from "@material-ui/core"; const styles = (theme: Theme) => createStyles({ root: {} }); interface MyProps extends WithStyles<typeof styles> { } export class MyComponent extends Component<MyProps ...

cssreactjstypescriptreact-nativematerial-ui

What is the best way to place a div in a static position for my specific situation

I need help positioning container 2 statically below container 1. The navigation bar is fixed, so it will be outside the flow of the page while container 1 is relative and will appear on top as if the navigation doesn't exist in the flow. However, whe ...

htmlcss

hide input type with minimal display

Can someone help me find the less equivalent to this css code snippet? I'm not familiar with less and this code is part of a larger global css file that includes generated code from all less files. input[type="checkbox"] { display: none; } Any a ...

cssless

What could be the reason for the inconsistent resizing behavior of this DIV container?

Upon viewing this demo, it becomes evident that there is an outer DIV containing an inner DIV on the left side with two inner SPANS. The challenge lies in positioning the two SPANS next to the DIV. If a line break (BR) is used to separate them, the width o ...

htmlcss

Trouble with background image displaying on meteor platform

Hey there! I'm in the process of replicating the HBO login page without functional links, but for some reason, the background image isn't loading properly. I suspect it might be an issue with resizing the image, but I can't pinpoint the exac ...

cssmeteorjsx

What could be the reason for the malfunction of jQuery's show() function?

Using jQuery, I have implemented a functionality to hide a div using the hide() method. However, upon clicking a link, the div is supposed to show but unexpectedly disappears after appearing briefly. HTML Code Snippet <div id="introContent"> & ...

javascriptjqueryhtmlcss

Disabling the 'fixed navigation bar' feature for mobile devices

Here's a code snippet that I'm working with. It has the ability to make the navigation stick to the top of the page when scrolled to. HTML <script> $(document).ready(function() { var nav = $("#nav"); var position = nav.position(); ...

javascriptjqueryhtmlcss

Enhance the speed at which animated images are displayed on web browsers

Currently, I am in the process of testing various methods for displaying images in a web browser. My goal is to develop a custom HTML element that can showcase a collection of images or frames as a continuous animation. The concept involves generating the ...

htmlcssanimationblazorskiasharp

Deleting a CSS class from buttons inside of two button arrays by utilizing two separate functions

Uncertain if the issue lies within the scope, but essentially... I have a collection of 4 div buttons stored in an array called main_btns. When these buttons are clicked, they toggle between 2 classes to display different background colors. Similarly, I ...

javascriptjqueryhtmlcssarrays

Tips for removing two specific "th" elements from a table that is generated dynamically

I have a challenge where I need to remove 2 specific elements from a table depending on which delete button is clicked Check out the code snippet below : <!--HTML--> <button type="button" class="collapsible">Manage Formulas</button> < ...

javascriptjqueryhtmlcsshtml-table

Generate a visually dynamic representation of a live website page

I'm curious if it's possible to create a login page similar to the one shown in this image, using HTML, CSS, and Javascript. Instead of a traditional background image, I want the background to display the actual layout of another website, such a ...

javascripthtmlcss

Ionic Framework: Eliminating the tiny 1px vertical scroll glitch for single-line content

Is anyone else experiencing this issue? I noticed that my page content is not filling up the entire space, even though it's just one line of text. There seems to be a 1px vertical scroll present, and the same problem occurs with the content in the sid ...

htmlcssionic-framework