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
Related
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.
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!
I have a div with the following css:
.someTopParentClass .someParentClass .someClass::selection {
background: #ffcc00;
}
This is working without reactjs.
The class does show in the inspector with the correct color, but the color is not really applied.
When using reactjs, the background on selection stays blue until I go into Chrome's inspector and only after I change any css property of any class - the selection becomes the correct color :/
The .someTopParentClass class is renders dynamically on button click.
My guess is that Chrome doesn't realize correctly for some reason that the parent class was added - although in the inspector it shows the correct .someClass and the correct color.
This issue seems to happen only in Chrome (Works in Edge,Firefox)
Update
I reproduced the issue in JSFiddle :
https://jsfiddle.net/rmindel/r3581ewt/
Where do I open a bug for Chrome :/ ?
For now my solution was to change the color of the text from black to #000001 so Chrome will know it needs to re-paint.
Opened a bug for Chrome:
https://bugs.chromium.org/p/chromium/issues/detail?id=685174#c6
The workaround for me is as stated -
"For now my solution was to change the color of the text from black to #000001 so Chrome will know it needs to re-paint."
I have a login page that can be themed by the user with any background color, image, or both. The username/password inputs will have transparent backgrounds to allow the page background to bleed through. In one customer case, the background color was chosen as #867d7d. They claim the carat (they called it the "cursor") is not visible while focused into the fields. The carat actually is there blinking like normal, but its color is so close to the background color that you can't see it.
Is there any way to make the carat visible in this case?
Edit: This works fine in Chrome and Firefox, the issue is only happening in Internet Explorer.
Here is a live demo: JSFiddle
<style>
body { background-color: #867d7d; }
input { color: white; background-color: transparent; width: 100%; }
</style>
<input placeholder="The caret is nearly invisible in IE">
This seems that IE respect the windows theming, instead config-able from its browser level.
You can change yoru windows theming here: "Control Panel\Appearance and Personalization\Personalization", and pick some extreme color you will see the carat color got changed.
I am hope IE would have carat color CSS styles.
When I disable input elements the text is taking the font color: #000000 in Firefox. This is not happening in IE. Please check the below page in IE and Firefox. Let me know how to give it a gray look as in IE.
test
Different browsers style disabled elements differently. Here is how you can control the style of disabled elements in Firefox.
[disabled] {
color:#ff0000;
background-color:#00ff00;
}
Reenable it, change the color, disable it again. It will only take .001 seconds.