Best IT Recipes

Disabled text color

The simple HTML below looks different in Firefox and WebKit browsers (I tested in Safari, Chrome and iPhone).

In Firefox, both borders and text are the same color ( #880000 ), but in Safari the text becomes a little lighter (as if transparency were applied to it).

Is there any way to fix this (remove this transparency in Safari)?

UPDATE:
Thanks for the answer. I no longer need this for my work (instead of disconnecting, I replace the input elements with stylized div elements), but I'm still wondering why this is happening and is there any way to control this behavior ...

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> input:disabled{ border:solid 1px #880000; background-color:#ffffff; color:#880000; } </style> </head> <body> <form action=""> <input type="text" value="disabled input box" disabled="disabled"/> </form> </body> </html>
+74
html css safari iphone webkit
Nov 04. '08 at 15:26
source share
10 answers
 -webkit-text-fill-color: #880000; opacity: 1; /* required on iOS */
+177
Jan 10 2018-11-11T00:
source share

Phone and Tablet web browsers (Safari and Chrome) and desktop IE browsers have a number of default changes for disabled form elements that you need to override if you want to style disabled inputs.

 -webkit-text-fill-color:#880000; /* Override iOS / Android font color change */ -webkit-opacity:1; /* Override iOS opacity change affecting text & background color */ color:#880000; /* Override IE font color change */
+42
May 7 '14 at 7:20
source share

This is an interesting question, and I tried a lot of overrides to see if I can do this, but nothing works. Modern browsers actually use their own stylesheets to tell elements how to display, so maybe if you can sniff out the Chrome stylesheet, you can see what styles they impose on it. I will be very interested in the result, and if you do not have it, I will spend a little time finding it later, when I have time to spend time.

FYI,

 opacity: 1!important;

doesn't override it, so I'm not sure if it's opacity.

+6
Nov 04 '08 at 23:22
source share

You can change the color to #440000 only for Safari, but IMHO the best solution is not to change the appearance of the button at all. Thus, in every browser on each platform, it will look the same as users expect it to be.

+6
Nov 05 '08 at 0:00
source share

You can use the readonly attribute instead of the disabled attribute, but then you will need to add a class because there is no pseudo-class input: readonly.

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> button.readonly{ border:solid 1px #880000; background-color:#ffffff; color:#880000; } </style> </head> <body> <form action=""> <button type="button" readonly="readonly" class="readonly">disabled input box</button> </form> </body> </html>

Beware that disabled input and input-only input do not match. A read input may have focus and will send values ​​to send. Take a look at w3.org

+4
Nov 05 '08 at 16:27
source share

for @ryan

I wanted the box with the input turned off to look like normal. This is the only thing that will work in Safari Mobile.

 -webkit-text-fill-color: rgba(0, 0, 0, 1); -webkit-opacity: 1; background: white;
+4
Jul 20 '17 at 8:31 on
source share

This question is very old, but I thought that I would post an updated solution for web kite. Just use the following CSS:

 input::-webkit-input-placeholder { color: #880000; }
+2
Jun 01 '10 at 16:09
source share

UPDATED 2019:

Combining the ideas from this page into a “put and forget” solution.

 input:disabled, textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder { -webkit-text-fill-color: currentcolor; /* 1. sets text fill to current 'color' for safari */ opacity: 1; /* 2. correct opacity on iOS */ }
+1
Apr 27 '19 at 1:44
source share

Can you use a button instead of typing?

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> button:disabled{ border:solid 1px #880000; background-color:#ffffff; color:#880000; } </style> </head> <body> <form action=""> <button type="button" disabled="disabled">disabled input box</button> </form> </body> </html>
0
04 Nov '08 at 16:56
source share

If you want to fix the problem for all disabled input, you can define -webkit-text-fill-color for currentcolor , so the color property of the input will be used.

 input[disabled] { -webkit-text-fill-color: currentcolor; }

Check out this fiddle in Safari https://jsfiddle.net/u549yk87/3/

0
Mar 20 '19 at 3:35
source share


More articles:


All Articles