I'm working on a website that will be viewed across three browsers - Chrome, FireFox, and Safari (both desktop and iPad).
I am trying to change the color of a disabled field on all browsers, so I have been using the following code:
input:disabled {
color: black;
}
<input value="testing" disabled></input>
I want the color of the disabled text to show as black. This works perfectly in Chrome and FireFox, but in Safari, it's still showing up as gray. Can anyone give any suggestions on how to change this field in Safari?
Solved this by adding the following to my CSS:
-webkit-text-fill-color: black;
Hope this helps someone else one day!
Related
I'm working on a contact form where the select inputs are designed to have white text on a black background. The desired styles are being applied correctly in every instance except when accessed via Safari or Firefox on either an iPhone or iPad.
The relevant CSS Script is as follows:
select{
-webkit-appearance: none;
color: white !important;
}
Is there a particular reason that these browsers may not be processing this style? And how would I circumnavigate it?
*edited as both Firefox and Safari express this same issue
This type of styling is not currently supported by WebKit browsers on Mac OS X. You may find some more ideas here: Pure CSS solution to styling specific options in Webkit based browsers?.
Have you tried styling the option?
select option {
color: white;
}
I'm trying to implement a simple color attribute in CSS and it works fine in mobile Google Chrome (Galaxy S10), but not in Mobile Safari (iPhone X):
input[type="text"], input[type="password"], textarea, select {
color: #777;
}
Utilizing this color displays a nice dark grey on all browsers but Safari. Safari turns this into an unreadable white color. I've checked the CSS and it's pulling the same color, so I'm not sure why the colors are displaying different. I've tried using a fully qualified color #777777 and color: black to see if it makes a difference, but no luck. Below is a screenshot of what it looks like on Safari (iPhone X) and Chrome (Galaxy S10).
I ran into the same thing, and while a lot of the similar questions are dealing with disabled input text color, for me it's just happening in my button's normal state.
I recommend reading this https://stackoverflow.com/a/43483479/4530520 for more info and taking their suggestion of setting the -webkit-text-fill-color property.
Long story short, I had an app written in HTML / CSS and a little JS. It had a lot of input fields that were displaying perfectly in Chrome, IE and Firefox - white background, black text.
Then I've decided to integrate it into WordPress Page. And it works perfectly - well, until You open it in Firefox. In Chrome and IE, when it is opened as a page, everything works. In Firefox, the text is white / transparent, so it is invisible with white background...
I've browsed through few pages of Google Search on this but cannot find any resolution. Adding color: black; !important to input selector does nothing, adding style="black;" to any input field also. Any other solutions I have found do not work.
Do You have any idea how to fix this? It would be a shame to be closed to Firefox users and honestly it looks like magic to me, nothing is working...
So, after seeing comments, an example:
<input type="text" name="rozstaw" id="rozstaw" maxlength="4">
CSS:
div.eyes-tests-choose-glasses-modal #eyes-tests-choose-glasses-container input {
font-family: Roboto, sans-serif
}
Although I don't really think this is the case - standalone it works great, on WordPress it does not. That's why I think maybe linking would be better way of describing things.
It's hard to guess, but here are two shots in the dark that might help you out
First, try adding your CSS like this:
input, textarea {
color:#000 !important;
}
Alternatively, you can do the same thing only specially targeting Firefox:
#-moz-document url-prefix() {
input, textarea {
color:#000 !important;
}
}
I am working on one of the opensource projects. I am facing a weird problem. When I open the website on Firefox or Chrome it displays the color I expect, but on IE it does not show up in that color (it shows very light color). My guess is, that this is happening because of the gradient I am using which IE is not able to interpret correctly. Here is gradient CSS code:
#mainmenu {
#css3_backgroundLinearGradient({
'angle': 'top',
'colors': [
{'color': '#77D3F8', 'position': '0%'},
{'color': '#3FA4D8', 'position': '100%'}
]
})
box-shadow: 0px 1px 2px $theme.linkColor;
}
When I do the view source on web page, I also see a line i.e:
<div class="gradientfilterIE"></div>.
I am not sure, is this line the culprit? But the complete open source project
source code does not have this line with gradientfilterIE. I am not sure if this line is causing the issue then where is it coming from?
I need your expert opinion why I see different gradient color on IE but works perfectly on Firefox and Chrome.
Setting this actually solved my problem:
#mainmenu .gradientfilterIE {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77D3F8', endColorstr='#3FA4D8',GradientType=0 );
}
Do we require filter: progid:DXImageTransform.Microsoft.gradient only for IE?
Because on Firefox and Chrome, without this it also works fine.
Gradients only work in modern browsers and not IE but that CSS you show is invalid in the first place.
I have a disabled input element that I am styling using the following CSS:
input[disabled='disabled'] {
color: #666;
}
This CSS works as expected in Firefox, but Chrome renders the text color several shades too light. If I set the color all the way to black #000000 Chrome renders it as a dark grey instead of black. The problem here is that the CSS produces the expected result in Firefox, but not in Chrome.
An example in JSFiddle which will showcase the discrepancy: http://jsfiddle.net/2AtGX/
How can I get this disabled input element to look the same in Firefox and Chrome?
Please check this link for the answer:
How can I fully override Chromium disabled input field colours?
Short answer: set -webkit-text-fill-color: black