Disable input with Safari colored background and transparency

Why does the CSS color #b3b3b3 turned white on a disabled input? What could be causing this and how can it be fixed?

Take a look at this code snippet: https://jsfiddle.net/esty6t20/

CSS:

.transp {
  background-color: transparent;
}
.bug-color {
  color: #b3b3b3;
}
.red-color {
  color: red;
}

HTML:

Disabled Bugged Gray

<input class="transp bug-color" value="test text" disabled>
<br/>
Disabled Red color
<input class="transp red-color" value="test text" disabled>
<br/>
Enabled Bugged Gray
<input class="transp bug-color" value="test text">

I have attempted to use !important to override the style, but haven't been successful. See the outcome here:

https://i.sstatic.net/8fDbR.png

Answer №1

There is a strange bug causing this issue. Placeholder text has always been problematic due to the lack of a standardized implementation across all browsers. Ensuring consistency can be a challenge.

To resolve this, you can include the -webkit-text-fill-color property in your CSS. This adjustment should work well in Chrome and help display placeholder text correctly in Safari.

Your CSS code would look like this...

.bug-color {
  color: #b3b3b3;
  -webkit-text-fill-color: #b3b3b3;
}

For more information about this property, refer to the MDN documentation or check the browser support on CanIUse.

Answer №2

The issue does not lie solely with the color #b3b3b3. When you specify color: #a8a8a8, you may notice that the text actually appears as #fdfdfd, indicating a miscalculation in Safari's color blending algorithm. Due to this error, even lighter shades like #b3b3b3 end up displaying as pure white.

In Safari, the color value for transparent is interpreted as rgba(0,0,0,0). To avoid discrepancies across browsers, use

background-color: rgba(255,255,255,0)
instead.

If compatibility with IE11 is necessary, be sure to provide a fallback option:

background-color: transparent;
background-color: rgba(255,255,255,0);

Answer №3

To utilize the disabled selector, consider using it in the following manner:

input.bug-color:disabled {color:#0000ff;}

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

The width of the child box does not properly receive the 100% application

Artistic Inspiration I have created a unique and elegant card layout design. * { box-sizing: border-box; } .card { display: flex; width: 600px; height: 400px; } .card > .img-window { width: 100%; background-image: url('https://s3- ...

Executing Controller method from an HTML webpage

I have designed a webpage in Html called SomePage.Html, and I am looking to trigger a method every time someone visits this page. Let's say I have a Controller named DefaultController with a method called - Get() and I want this method to be executed ...

The multiple instances of $("selectort") being clicked are causing the if-then condition to malfunction

I am dealing with a server that generates web pages dynamically using asp.net and I have no control over the content. My goal is to track all button clicks on these pages. You can find an example in JSFiddle at https://jsfiddle.net/forssux/aub2t6gn/2/. ...

What is the best way to assign a unique color to two overlapping cells in an HTML table using HTML and jQuery?

I have a task to highlight a row or column when a checkbox is selected, similar to the example shown in the image below. How can I adjust the code so that the overlapping cell gets a different color instead of green or yellow? For instance, in the image b ...

Tips for arranging Bootstrap cards in ReactJS so they wrap to a new line after three have been displayed

In my personal portfolio, there is a dedicated page for showcasing various projects using Bootstrap cards. These projects are fetched from a CardData.js file and then mapped to a ProjectCard component. Ideally, I want to display 3 cards per row with consis ...

I am looking to create a button with a transparent border within a white background container

I am trying to achieve a button border effect similar to the one in the image provided. I want to create a div with a white background color, and inside that div, I need to add a button with a 15px margin or padding while making it transparent. <div cl ...

Slideshow feature in Bootstrap 4

Encountering an unusual problem with Bootstrap 4's carousel - it was functioning properly until I made some changes; even after deleting it and re-adding, the issue persists. The arrows seem to be misplaced view image <body> <ul class="nav j ...

Leveraging CSS custom properties globally

I have set up PostCSS parser with the help of and am currently exploring options to create a variables.css file that will hold all my theme settings. At this point, my variable.css file appears as follows, containing a couple of variables: :root { --co ...

Incorporate CSS styling from a separate .css file into a material component

Just starting out with material UI. I have a css file that looks like this: .bgItem { font-size: 14px; } My component setup is as follows: <MenuItem key={status.Id} value={status.Value} classes={css.bgItem}> {status.Description} </Men ...

Is there a way to determine the app bar height within a React Material UI application?

I'm trying to create a full-screen image for the opening of my website using React and Material UI. Here's a snippet of my JSX code with the default Material UI theme: <AppBar> //code in between </AppBar> <Container sx={{margin: ...

Discover the job specifications pages on Dice.Com by utilizing C programming language

I have taken on a student project involving web scraping job postings from Dice.Com for analysis. My main focus is on extracting the job description, but I am struggling to figure out how to access it. With limited knowledge in HTML and C#, I find it dif ...

Leveraging jQuery to automatically fill in a time field while excluding other buttons

I've been working on using jQuery to automatically fill in a time input field. The functionality is working properly, but the time is also being applied to my other button. How can I make sure it only gets assigned to the time input field? I would re ...

The AngularJS dropdown menu is refusing to expand

https://i.sstatic.net/GYpNe.png I have created a dropdown select menu using AngularJS's ng-options. The selection and submission processes are functioning correctly. However, as shown in the image, the dropdown menu does not collapse as intended; it ...

Drop-down and autocomplete feature in Material UI design framework

Encountering an issue with aligning a label with a dropdown in material UI, and for some reason, this behavior is observed: https://i.sstatic.net/n7pj8.png Struggling to get them aligned on the same row. This is the code snippet of my component: const us ...

switch out asterisk on innerhtml using javascript

Is there a way to replace the asterisks with a blank ("") in the innerHTML using JavaScript? I've attempted this method: document.getElementById("lab").innerHTML = document.getElementById("lab").innerHTML.replace(/&#42;/g, ''); I also ...

Send an email containing the entirety of a web page

After selecting a user from a drop-down and running a search, a PHP page displays a time schedule in HTML table format. Now, the goal is to send the entire page to the user via email when a specific button is clicked. The user's email address is sto ...

When the "ok" button is clicked in a custom confirmation box, the function will return

When the first button is clicked, I validate certain text boxes and then call Confirm() to display a confirmation box. I want it to return true to the calling function when "ok" is clicked and for control to go back to the UI to proceed ...

Dynamically remove the underline tag from a table cell

Within my HTML, I've inserted the code below for a cell: cell.innerHTML = "<u>View All</u>"; In my onclick event for the cell, I have this code (for example, it's based on a condition where I structure the content as shown below, no ...

Set the dropdown item as selected using AngularJS

I have created a demo of an AngularJS dropdown menu, and it's working perfectly. Now, I want to make the selected item appear active. I'm not sure how to achieve this. Can anyone please assist me? I am using the Angular-Dropdown.js library. Here ...

JavaScript functions do not work within the HTML code

I am currently working on my debut website and I'm facing an issue with the JavaScript file not functioning properly. Is there a chance you can help me troubleshoot this? I'm still in the learning stages of programming. This is the HTML content ...