Bsrhrki

Do parry bonuses stack?

Why is it a bad idea to hire a hitman to eliminate most corrupt politicians?

Car headlights in a world without electricity

What reasons are there for a Capitalist to oppose a 100% inheritance tax?

Should I tell management that I intend to leave due to bad software development practices?

How to calculate the right interval for a timelapse on a boat

files created then deleted at every second in tmp directory

What historical events would have to change in order to make 19th century "steampunk" technology possible?

Am I breaking OOP practice with this architecture?

Why did early computer designers eschew integers?

Can compressed videos be decoded back to their uncompresed original format?

Does int main() need a declaration on C++?

What was Prahlada's age when his father was killed?

When should I get an alignment after strut and coil replacement?

Is it possible to map the firing of neurons in the human brain so as to stimulate artificial memories in someone else?

Why was the shrink from 8″ made only to 5.25″ and not smaller (4″ or less)

Can a virus destroy the BIOS of a modern computer?

Why didn't Boeing produce its own regional jet?

How to coordinate airplane tickets?

In the UK, is it possible to get a referendum by a court decision?

What is the opposite of "eschatology"?

Can I hook these wires up to find the connection to a dead outlet?

Knowledge-based authentication using Domain-driven Design in C#

How can I prove that a state of equilibrium is unstable?

What is the most common color to indicate the input-field is disabled?

Is this hard to read?Coming soon pages - best practices?Intuitive colour pickers for non-expert users?How do users react to Bootstrap's uneditable-input class?Why do so many forms use input masks in for input fields?What is the best way to display disabled field and text for accessibility color contrast supportWhat is the best way to categorize or represent a list of top-level domains (TLDs)?Using hue/saturation to represent multiple dimensionsLogin system for anonymous crime reporting serviceColor Palette Accessibility for White Text Button Labels

4

as I have been going through different references on input-field designs, I realized that people tend to flip-flop with grey or white background to indicate whether the input-field is enabled or disabled.

Does anyone know where I can find more information about this?

input-fields color

share|improve this question

asked 5 hours ago

ec1234ec1234

212

New contributor

ec1234 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment | 

4

as I have been going through different references on input-field designs, I realized that people tend to flip-flop with grey or white background to indicate whether the input-field is enabled or disabled.

Does anyone know where I can find more information about this?

input-fields color

share|improve this question

asked 5 hours ago

ec1234ec1234

212

New contributor

ec1234 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment | 

as I have been going through different references on input-field designs, I realized that people tend to flip-flop with grey or white background to indicate whether the input-field is enabled or disabled.

Does anyone know where I can find more information about this?

input-fields color

share|improve this question

asked 5 hours ago

ec1234ec1234

212

New contributor

ec1234 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

share|improve this question

asked 5 hours ago

ec1234ec1234

212

New contributor

ec1234 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

share|improve this question

asked 5 hours ago

ec1234ec1234

212

New contributor

ec1234 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

asked 5 hours ago

ec1234ec1234

212

New contributor

ec1234 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

asked 5 hours ago

ec1234ec1234

212

3 Answers
3

active

oldest

votes

5

If you're using a framework, it should have the pattern defined by default. It's common to use gray, often dimming both the background and text.

Even if you're not implementing a framework, you can incorporate its patterns into your application.

Bootstrap

Their forms section shows disabled elements:

Material design

They have a couple different styles of inputs, so look around what might match your application. This is the Outlined Text Fields section:

And their Filled text fields:

share|improve this answer

answered 5 hours ago

Mike MMike M

11.1k12331

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for the info!
  
  – ec1234
  4 hours ago
  

  
  
  
  

add a comment | 

4

The correct terminology is Greyout.

It indicates less importance, relevance or priority or a change of status such as something being disabled or inaccessible.

Definition by Oxford Dictionary:

noun

Partial or incipient blackout experienced by a person subjected to strong accelerative forces, especially during flying; (more generally) momentary diminution of vision or consciousness, or partial loss of memory.

Origin

1940s; earliest use found in The Richmond Times-Dispatch. From to grey out, after blackout.

So, We can deduce that greyout comes before the blackout, the end.

share|improve this answer

edited 8 mins ago

Emile Bergeron

1033

answered 5 hours ago

Juan Jesús MilloJuan Jesús Millo

1116

New contributor

Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for the info!
  
  – ec1234
  4 hours ago
  

  
  
  
  

add a comment | 

1

Disabled input fields are usually gray (gray text and gray background). But you have to be careful with the contrast ratio and other accessibility issues, like working with screen readers.

This article, although it is about buttons, has some nice tips that can be applied to improve disabled fields (I alter them to apply to fields):

• Get better contrast by using bigger font and/or darker colors;


• Give assistive technologies, like screen readers, some information at the field, since they won’t read out information inside the disabled field (it’s often skipped).


• Give users information when they tap, hover or click the disabled field. Or give them some other cue (e.g. through a tooltip). For example, you could give them an explanation to why the field is disabled.

share|improve this answer

answered 2 hours ago

AlineAline

948315

add a comment | 

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "102"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
noCode: true, onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

ec1234 is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fux.stackexchange.com%2fquestions%2f124813%2fwhat-is-the-most-common-color-to-indicate-the-input-field-is-disabled%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

5

If you're using a framework, it should have the pattern defined by default. It's common to use gray, often dimming both the background and text.

Even if you're not implementing a framework, you can incorporate its patterns into your application.

Bootstrap

Their forms section shows disabled elements:

Material design

They have a couple different styles of inputs, so look around what might match your application. This is the Outlined Text Fields section:

And their Filled text fields:

share|improve this answer

answered 5 hours ago

Mike MMike M

11.1k12331

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for the info!
  
  – ec1234
  4 hours ago
  

  
  
  
  

add a comment | 

5

If you're using a framework, it should have the pattern defined by default. It's common to use gray, often dimming both the background and text.

Even if you're not implementing a framework, you can incorporate its patterns into your application.

Bootstrap

Their forms section shows disabled elements:

Material design

They have a couple different styles of inputs, so look around what might match your application. This is the Outlined Text Fields section:

And their Filled text fields:

share|improve this answer

answered 5 hours ago

Mike MMike M

11.1k12331

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for the info!
  
  – ec1234
  4 hours ago
  

  
  
  
  

add a comment | 

If you're using a framework, it should have the pattern defined by default. It's common to use gray, often dimming both the background and text.

Even if you're not implementing a framework, you can incorporate its patterns into your application.

Bootstrap

Their forms section shows disabled elements:

Material design

They have a couple different styles of inputs, so look around what might match your application. This is the Outlined Text Fields section:

And their Filled text fields:

share|improve this answer

answered 5 hours ago

Mike MMike M

11.1k12331

share|improve this answer

answered 5 hours ago

Mike MMike M

11.1k12331

answered 5 hours ago

Mike MMike M

11.1k12331

answered 5 hours ago

Mike MMike M

11.1k12331

4

The correct terminology is Greyout.

It indicates less importance, relevance or priority or a change of status such as something being disabled or inaccessible.

Definition by Oxford Dictionary:

noun

Partial or incipient blackout experienced by a person subjected to strong accelerative forces, especially during flying; (more generally) momentary diminution of vision or consciousness, or partial loss of memory.

Origin

1940s; earliest use found in The Richmond Times-Dispatch. From to grey out, after blackout.

So, We can deduce that greyout comes before the blackout, the end.

share|improve this answer

edited 8 mins ago

Emile Bergeron

1033

answered 5 hours ago

Juan Jesús MilloJuan Jesús Millo

1116

New contributor

Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for the info!
  
  – ec1234
  4 hours ago
  

  
  
  
  

add a comment | 

4

The correct terminology is Greyout.

It indicates less importance, relevance or priority or a change of status such as something being disabled or inaccessible.

Definition by Oxford Dictionary:

noun

Partial or incipient blackout experienced by a person subjected to strong accelerative forces, especially during flying; (more generally) momentary diminution of vision or consciousness, or partial loss of memory.

Origin

1940s; earliest use found in The Richmond Times-Dispatch. From to grey out, after blackout.

So, We can deduce that greyout comes before the blackout, the end.

share|improve this answer

edited 8 mins ago

Emile Bergeron

1033

answered 5 hours ago

Juan Jesús MilloJuan Jesús Millo

1116

New contributor

Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for the info!
  
  – ec1234
  4 hours ago
  

  
  
  
  

add a comment | 

The correct terminology is Greyout.

It indicates less importance, relevance or priority or a change of status such as something being disabled or inaccessible.

Definition by Oxford Dictionary:

noun

Partial or incipient blackout experienced by a person subjected to strong accelerative forces, especially during flying; (more generally) momentary diminution of vision or consciousness, or partial loss of memory.

Origin

1940s; earliest use found in The Richmond Times-Dispatch. From to grey out, after blackout.

So, We can deduce that greyout comes before the blackout, the end.

share|improve this answer

edited 8 mins ago

Emile Bergeron

1033

answered 5 hours ago

Juan Jesús MilloJuan Jesús Millo

1116

New contributor

Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

share|improve this answer

edited 8 mins ago

Emile Bergeron

1033

answered 5 hours ago

Juan Jesús MilloJuan Jesús Millo

1116

New contributor

Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

edited 8 mins ago

Emile Bergeron

1033

edited 8 mins ago

Emile Bergeron

1033

answered 5 hours ago

Juan Jesús MilloJuan Jesús Millo

1116

New contributor

Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

answered 5 hours ago

Juan Jesús MilloJuan Jesús Millo

1116

1

Disabled input fields are usually gray (gray text and gray background). But you have to be careful with the contrast ratio and other accessibility issues, like working with screen readers.

This article, although it is about buttons, has some nice tips that can be applied to improve disabled fields (I alter them to apply to fields):

• Get better contrast by using bigger font and/or darker colors;


• Give assistive technologies, like screen readers, some information at the field, since they won’t read out information inside the disabled field (it’s often skipped).


• Give users information when they tap, hover or click the disabled field. Or give them some other cue (e.g. through a tooltip). For example, you could give them an explanation to why the field is disabled.

share|improve this answer

answered 2 hours ago

AlineAline

948315

add a comment | 

1

Disabled input fields are usually gray (gray text and gray background). But you have to be careful with the contrast ratio and other accessibility issues, like working with screen readers.

This article, although it is about buttons, has some nice tips that can be applied to improve disabled fields (I alter them to apply to fields):

• Get better contrast by using bigger font and/or darker colors;


• Give assistive technologies, like screen readers, some information at the field, since they won’t read out information inside the disabled field (it’s often skipped).


• Give users information when they tap, hover or click the disabled field. Or give them some other cue (e.g. through a tooltip). For example, you could give them an explanation to why the field is disabled.

share|improve this answer

answered 2 hours ago

AlineAline

948315

add a comment | 

Disabled input fields are usually gray (gray text and gray background). But you have to be careful with the contrast ratio and other accessibility issues, like working with screen readers.

This article, although it is about buttons, has some nice tips that can be applied to improve disabled fields (I alter them to apply to fields):

• Get better contrast by using bigger font and/or darker colors;


• Give assistive technologies, like screen readers, some information at the field, since they won’t read out information inside the disabled field (it’s often skipped).


• Give users information when they tap, hover or click the disabled field. Or give them some other cue (e.g. through a tooltip). For example, you could give them an explanation to why the field is disabled.

share|improve this answer

answered 2 hours ago

AlineAline

948315

share|improve this answer

answered 2 hours ago

AlineAline

948315

answered 2 hours ago

AlineAline

948315

answered 2 hours ago

AlineAline

948315