What is the method for changing the input color when it is "being autocompleted" in Microsoft Edge?

My CSS file sets the color of all elements to white, but overrides this for inputs with a black font color. However, when Edge autofills an input, the "matched characters" inside the input appear in the default wildcard color, making them invisible on the white background.

Take a look at the image below, where the arrow points to four white characters that are rendered invisibly, followed by the letters "an".

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

None of the CSS styles related to autofill seem to work. This issue only occurs in Edge; Chrome does not exhibit this behavior. It appears to be a recent change that has been introduced.

Is there a specific selector to target the color of this text in Edge? As a temporary solution, I can change the wildcard color selector to black, but that would require significant changes to the CSS.

cssmicrosoft-edge

Answer №1

To style text in Edge, you can utilize the property -webkit-text-fill-color to specifically target the fill color of the text. I find this behavior somewhat questionable as normally the text-fill-color should default to currentcolor if not explicitly set, as stated in the specification. Unlike the color for :autofill, it does not default to any value in the UA (User Agent) style either.

* {
  color: white
}

label {
  color: black;
}

input {
  color: black;
  -webkit-text-fill-color: black;
}
<form>
  <label for="firstName">First Name:</label>
  <input autocomplete="given-name" id="firstName">
  <input type="submit" value="Submit">
</form>

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

Bootstrap 5 dropdown toggle displaying incorrect menu

I am currently working on a website project using Bootstrap 5. In the navigation bar of my site, I have implemented a dropdown menu with multiple submenus that dropend. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" ...

htmlcssbootstrap-5

Learn the trick to make this floating icon descend gracefully and stick around!

I'm trying to create a scrolling effect for icons on my website where they stay fixed after scrolling down a certain number of pixels. I've managed to make the header fixed after scrolling, but I'm unsure how to achieve this specific effect. ...

javascriptjqueryhtmlcssskrollr

Space empty on the right side of a card within a container - Bootstrap 4

I've been working on creating a responsive card for different screen sizes, but I've encountered a problem. On mobile screens, there seems to be some unwanted blank space on the right side of the card. Is there a way to center this card on smalle ...

htmlcssbootstrap-4

javascript An interactive accordion component created with Bootstrap

I have been searching for a solution to create an accordion-style collapsible set of panels where the panels remain separate and do not have headers. I want buttons on one side, and when clicked, a panel is displayed on the other side. Only one panel shoul ...

javascriptjqueryhtmlcsstwitter-bootstrap

Positioning of Responsive Slider

I'm currently working on a responsive website, but I am facing challenges with the placement of the slideshow dots. When I switch to the device toolbar, they seem to change position. I have tried various methods such as using relative and absolute uni ...

javascripthtmlcss

Is there a discrepancy in height between Chrome's mobile emulator and the iPhone simulator?

Currently, I am conducting a layout test for a PhoneGap application using the Framework7 framework across the Chrome mobile emulator (iPhone 6) and Xcode iOS simulator. However, I am facing difficulties with aligning the vertical layout on both simulators. ...

cssiphonecordovagoogle-chromehtml-framework-7

Display data from additional tables within a loop

Within my database, I have organized information into 3 tables: train_information: +----------+-----------------+------------------+ | train_id | number_of_axles | number_of_bogies | +----------+-----------------+------------------+ | 1 | ...

phpmysqlcssdatabaseloops

How can you utilize jQuery to eliminate specific select field values from the DOM prior to submission?

I am currently working on a Squarespace form that utilizes jQuery to show/hide specific fields in order to create a customized form using the show(); and hide(); functions. $(".option2 select").hide(); The issue I am facing is that simply hiding the fiel ...

jqueryhtmlcsssquarespace

What are some strategies for disregarding global CSS styles?

I am facing an issue on my html page with a specific div structure. The <div id="container">/* lots of nested html with elements like div, ul, li etc */</div> is causing some trouble in my global css file called style.css. The style. ...

htmlcss

Customizing SwiperJS to display portion of slides on both ends

I need some assistance with my SwiperJS implementation to replace existing sliders on my website. The goal is to have variable-width slides, showing a landscape slide in the center with a glimpse of the preceding and following slides on each side. If it&ap ...

javascriptjquerycsssliderswiper.js

Failure in the application of CSS styles to HTML

I have set up a very simple thing, but it just won't work for some reason. The HTML document doesn't seem to be picking up on the CSS. When I click on the href attribute on line 6 in View Source, it shows me the file, so the browser can see it. I ...

htmlcssapache2

Troubleshooting: Image Not Displaying in Twitter Bootstrap Theme

I'm new to using bootstrap and I'm encountering an issue where my image is not showing up. Strangely, the default background image is appearing even though I have not referenced it in the HTML or CSS files. View my code here ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Position Bootstrap Modal in the center horizontally

I am working on an Angular project and struggling to center my Bootstrap 3 Modal horizontally on the screen. Despite trying various solutions like using text-align: center and align = "center", I have been unsuccessful. Can someone guide me on how to prope ...

csstwitter-bootstrapangular

Maintain correct aspect ratio when zooming in the body

I'm facing a challenge with my single-page web application that has fixed width and height. It doesn't scale properly to fit the page at all times. Scaling based on its width works fine, but I want to achieve scaling from both width and height w ...

jquerycsszoomingaspect-ratio

"Enhancing iPhone User Experience with CSS Hover Effects

I am experiencing an issue with my website where the hover functionality works perfectly on all devices except for iPhones. On an iPhone, users have to continuously press the screen until the hover transition completes in order to view the information. I ...

iosiphonecsshoveruser-agent

"Enhance your shinydashboard with a customizable header dropdown feature that allows you

I am trying to create a vertical grouped dropdown menu in the header panel that contains multiple links. Currently, I can only achieve a flat horizontal layout using tags$li. I want to place linkA and linkB under grouplinkAB, allowing users to open one o ...

htmlcssrshinyshinydashboard

Tips for placing an element in the top left corner and turning it into a functional "back to top" button

I need to add a "back to top" button on my website and I want to place it in the top left corner, as shown in the image above. Here is the HTML code I am using in my Jekyll site: <body> <a name="top"></a> <a href="#top" id="to ...

jqueryhtmlcss

Challenges with conflicting CSS styling issues

I am facing a CSS issue on my website. I am trying to add captions for images on my site. I have experimented with the jquery-capty plugin () and some custom CSS styles for framed images (). While both solutions work in my regular layout, they do not funct ...

jqueryhtmlcss

Utilizing the DirectusImage tag for a stylish background effect

I'm new to Directus and I need help styling a card with a background image from a Directus Image. Can anyone guide me on how to achieve this? Here's what I have tried: <Card style={{backgroundImage:"url({someColletion.image.id})" &g ...

cssreactjsjsxdirectus

Generating a new display div element using an anchor link

I've set up a div container with a button that, upon clicking, adds a class to an element in my markup causing it to expand and take over the entire screen. Markup before: <section class="isi" data-trigger="toggle" data-trigger-class="isi--show-i ...

javascriptjquerycss