Customize the yellow background color of Safari's autofill feature by following these simple

When I open this image in Safari, this is what I see:

https://i.stack.imgur.com/KbyGP.png

However, this is the code I have:

https://i.stack.imgur.com/4wEf0.png

References:

How to Remove WebKit's Banana-Yellow Autofill Background

Remove forced yellow input background in Chrome - even though it mentions Chrome, it still relates to webkit-autofill

I attempted to use 

background-color:white !important;
to override the locked CSS. The debug tool displayed the User Agent Stylesheet background-color as crossed out, but the color did not change and the custom style was in effect.

This situation left me puzzled; I am unsure why I am unable to modify the User Agent Stylesheet.

javascripthtmlcsssafari

Answer №1

After some research, I discovered that certain CSS solutions like -webkit-box-shadow and background-color only function properly in Google Chrome and not in Safari. What ended up working for me was adding background-clip: content-box. Ultimately, I found a code snippet that works seamlessly across all browsers:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 60px #fafafa inset !important;
    background-color: #fafafa !important;
    background-clip: content-box !important;
}

Answer №2

It has come to my attention that most browsers are set on indicating autofill (especially Safari, which is quite adamant about it).

I stumbled upon a clever workaround where -webkit-box-shadow can be used to mask the background color. However, targeting a specific input with a class proved to be challenging due to specificity issues.

In Safari version 10.0.2, the browser automatically inserts shadow content as part of the user agent, revealing the autofill background-color and value. Unfortunately, these styles cannot be directly manipulated by users, hence the solution provided below.

input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  -webkit-text-fill-color: #333;
}

If there's also a border-bottom in the input field:

input:-webkit-autofill, input:-webkit-autofill:focus {
  border-bottom: 1px solid #333;
}

Sources:
- insightful medium post
- engaging stackoverflow discussion
- understanding why browsers ignore autocomplete="off"

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

Eliminating the bottom border of all buttons, except for the last three buttons in the list, solely using pure JavaScript, unless alternative methods are available

I have 3 sets of buttons, with each set containing 9 buttons stacked in 3 columns inside an ordered list (ol) within list items (li). I have removed the bottom border of the buttons to avoid double borders since they are stacked on top of each other withou ...

javascripthtmlcss

Retrieve the value of a JSON array containing only a single object using jQuery

In my project, I have a jQuery file and a PHP file. If the PHP file successfully completes the process, it returns the value 2 using `echo json_encode(2)`. I am able to catch this value in the jQuery file and display a string on an HTML div without any iss ...

javascriptphpjqueryarraysjson

Is Jquery struggling to modify the visual enhancements?

Check out this link, I need the sidebar design to be similar to what is shown in the provided link. Furthermore, I am looking for a way to have a pointer that follows along with my selection on different labels such as home, charts, etc. Can anyone assis ...

javascriptjqueryhtml

What is the best way to rearrange the order of divs when the screen is being resized?

My task involves rendering a page with react-bootstrap on desktop, structured like this: <Row> <Col xs={12} md={8} className="a"> </Col> <Col xs={6} md={4} className="b"> </Col> <Col xs={6} md={4} className ...

htmlcssreactjs

What's the best way to incorporate necessary styles into text using particular fonts?

Is there a way to set letter spacing and word spacing for text on my website with the font 'classylight'? Adding classes to each post in the site map seems like a lengthy process. To save time, I attempted to use the attribute*=style property to ...

javascripthtmljquerycss

Determine the length of a string in JavaScript and PHP taking into account "invisible characters" such as and

I have a textarea where users can input text, and I want to show them how many characters they have left as they type using JavaScript or jQuery: var area = 'textarea#zoomcomment'; var c = $(area).val().length; After that, the text is validated ...

javascriptphpjquerylaravel-5.1string-length

What are some ways to ensure text stands out against a gradient backdrop?

Is there a way to ensure that text adjusts automatically to a background transition from one color to another using only CSS? I've tried using "mix-blend-mode:difference" from a forum, but it had no effect on the text. .container{ color: white; ...

csshtmlbackground-colorlinear-gradients

What steps are involved in enabling Server Side Rendering with Next.js?

For my exploration of Next.js, I started by setting up a new Next.js project and incorporating code to retrieve weather data: export default function Home() { const [data, setData] = useState(null); useEffect(() => { fetch("https://api.we ...

javascriptreactjsnext.js

Leveraging JavaScript to determine whether a number is even or exiting by pressing the letter "q"

The main goal is to have the user input a number to check if it is even, or enter 'q' to exit the program. var readlineSync = require('readline-sync'); var i = 0; while (i <= 3) { var num = readlineSync.question ...

javascriptnode.jswhile-loop

Unable to attach a javascript eventListener to a newly created element

I've utilized JavaScript to generate 625 <div class="box"><div> elements and now I'm trying to attach an event listener to each box. The boxes are being created successfully, however, the listener does not seem to be working ...

javascriptwebevent-handling

Exchange of Fusion Chart

Attempting to perform a fusion chart swap with asp has proven to be challenging. The alternative approach involves rendering the fusion chart first and then using onmousedown to replace the chart with an image. However, this method is also encountering i ...

javascriptjqueryfusioncharts

Ways to verify an NPM package for non-JavaScript code

How can we determine if an npm package consists purely of JavaScript without any bindings or dependencies that require compiling? For instance, the node-speaker package (https://github.com/TooTallNate/node-speaker) requires compilation (mpg321), while req ...

javascriptnode.jsbuildcompilationnpm

Achieving perfect alignment both horizontally and vertically using CSS3's viewport height of 100%

I'm trying to utilize CSS3's Viewport Height to create a fullscreen section with a height of 100vh. However, I am encountering difficulties in centering elements both horizontally and vertically within the section. My goal is to have an image and ...

htmlcss

React Native: Issue with Higher Order Component when utilizing the `onLayout` prop

The functionality of this component involves rendering the Placeholder. Once it acquires its layout, this higher-order component (HOC) updates the state and invokes the child component with the values. Everything seems to be working fine up to this point. ...

javascriptreactjsreact-native

``Take your website to the next level with a customized navigation menu

I'm currently in the process of developing a CMS for my website and I've reached the Navigation part. Can anyone provide me with tips or direct me to a tutorial on how to create a dynamic navigation menu? Thank you in advance. Below is a snippet ...

javascriptphpmysqlnavigationcontent-management-system

What could be causing the HTML and CSS to not show the background image?

Hey, I'm new to html and css and I'm having trouble getting a background image to show up on my website. All I see is "first website" in the corner but the image isn't displaying. Here's the code I have: * { margin: 0; padding: 0 ...

htmlcss

PHP XML loop encountering issues with functionality

Hi there, I'm a newcomer to stackoverflow, but I've been following this site for quite some time. Currently, I'm working on a simple web application that will serve as a catalogue for music tracks, allowing users to add their own tracks afte ...

phpxmlhtml

What HTML element identifies the beginning of a particular section?

It has been suggested that Google frowns upon using identical content across multiple websites. Is there a method to mark or label a section of content with its "source"? For example, an attribute might look like this: <div original-content="http://s ...

htmlseogoogle-searchsemantic-markup

How to target the following sibling element (not a child) with CSS

I am working with the following HTML structure: <div class="col-sm-12"> <input id="my_id"> <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;"> </div> </div> How can I target and change ...

htmlcss

"Utilizing JQuery to enhance task management by implementing a delete function

I need help figuring out how to create a function that can delete tasks from my todo list. Currently, each task has its own remove button, but I want to implement a single remove button at the bottom that removes checked or crossed out tasks. Any suggestio ...

javascriptjqueryhtmlcss