What color do disabled text-boxes in html uses?

It depends on the browser. In Chrome, it is the system color 'graytext', so you don't need to remember the hex code.


I implemented the following to make any read-only textbox or textarea (useful in my case) appear disabled when it was readonly.

<style>
input:read-only, 
textarea:read-only,
[contenteditable]:read-only {
  cursor: not-allowed;
  background-color: #EBEBE4 !important;
  color: #C6C6C6;
} 
</style>

Or this:

<style>
input:read-only, 
textarea:read-only,
[contenteditable]:read-only {
  pointer-events: none;
  background-color: #EBEBE4 !important;
  color: #C6C6C6;
}
</style>

Hopefully this helps someone!


The background color is rgb(235, 235, 228); or #EBEBE4 in hex.

At least that's the value in chrome (checked with the debugger tools). This value could be different in other browser


They are whatever you set them to. Only IE9 and older have a fixed, unchangeable setup for disabled elements (which is oddly the only way you can get any kind of text-shadow in those versions...)

You can literally do this:

:disabled {background-color:pink; color:blue}

And get bubblegum-coloured textareas when you disable them!

What I'm trying to say is that you can set the styles to whatever you want, so you could do this:

:disabled, :read-only, [disabled], [readonly] {background:#cccccc; color:#ffffff}

Tags:

Html

Css

Colors