CSS: Get "disabled" input background color? - css

Is there a special CSS system color equivalent to the system's disabled text input background color? I know there's one for the disabled text color (GrayText), but I can't find one for the background color.
To make it more clear, I'm looking for the background color that gets set when you do something like:
<input type="text" disabled />
I don't want to restyle disabled inputs; I want to use the existing system style elsewhere.
Edit:
To be even more clear, I'm looking for the system color keyword, not the actual color. For example, to use the system's defined disabled text color, you would do this:
<span style="color: GrayText;">This text looks like disabled text in your operating system</span>
I just can't find the one for the background color.

I encountered this issue while trying to style a javascript replacement for a select. While there has been no progress in the CSS spec, there is a jQuery alternative.
$("input:disabled").css("background-color")
This returns a RGB color from an already disabled input, so unfortunately it's not as flexible as a CSS color, but it will work across browsers and reacts to custom colors applied to disabled elements through CSS.

This isn't the purpose of the keyword - the use of colour [I believe] is technically up to the browser vendor - if they observe the OS preferences then thats up to them.
There are a small number of color names originally in the W3C spec. However these were extended to include the list of X11 color names that were supported by most browser vendors.
Together those lists are all the valid names acceptable in a browser.

According to the latest CSS spec, there is no system color keyword for "disabled" background color.

Related

QComboBox: change one option of stylesheet

I have some particular QComboBox like this (osx style):
that I want to highlight programmatically. I used
combo->setStyleSheet("background-color: yellow");
and the background get changed, but then the whole style of my widget becomes ugly like this:
as you can see, the background is ok, but dropdown button got changed with '90 motif style (old good days...)
Is it possible to just change the background?
Some of the stylesheet rules will trigger a fallback to the Windows style, see my answer here.
One option to style the background is by using QProxyStyle.
Changing the palette might also work.

How to use system desktop colors in CSS3?

CSS2 had a nice way to implement system desktop colors. However in the link there is a note that this is deprecated and
If you want to emulate the look of a user interface related element or
control, please use the ‘appearance’ property instead of attempting to
mimic a user interface element through a combination of system colors.
But from the example the appearance property is useful to render form elements like checkbox or button.
How am I supposed to use appearance to emulate say table using system colors? To omit the color specification works for borders, but not for backgrounds.
Sometimes I'd like to create simple webs that displays dark if the user has dark system desktop settings. It can be done specifying no color at all in CSS. But If I want say slightly darker (or lighter on dark desktops) background on headings, how to do it in CSS3? (In CSS2 I could use i.e. ButtonFace color.)

how to apply css to the input type file for setting width?

i want to set the width of the html tag . And also apply css on the browse button which is provided in the input type file.
I referred the following -
Is there a way to set width of for showing in Firefox?
also referred following-
Setting uniform width in all browsers
but it is for specific browser. It should work on the mozila firefox , netscape navigator, google crome,safari etc. and i don't want to hide the original input control.
how to do this?
The short answer is that you can not really style the input file, and it's like this by design.
how ever, some tricks are available for you, for example:
http://www.quirksmode.org/dom/inputfile.html
You don't. It doesn't work that way.
You can specify the size of the element, but the browser chooses itself how to use that space to display the input field and the button. You can't style the intput field and the button separately.
It's not even specified in the standard that the file input should have an input box and a button. The browser can display the control any way it sees fit, and some browsers displays it differently, for example using a button and a text label.

Input text color not set on browser override

I'm working on a site that needs to allow people to override the colors of the text through their browser settings. The way I've been doing this is to NOT set any color values for text in the CSS. In my testing I've noticed that inputs and selects which don't have any CSS color set for them stay black even if they are supposed to be overridden with a different color from the browser. I've attached some screenshots (all text should be blue) for Firefox as an example but have also seen this problem in IE.
Does anyone know if this is fixable and how to make input and select tags pick up the browser color?
Native form elements (especially in older browsers) are notoriously hard to style, both at the page CSS level, as well as at the browser level. Internet Explorer (at least versions 8 and older) use the native OS UI elements for form elements, and those get their default styles from the operating system itself.
The page can override the colors of the native form elements to a limited extent (and user-level CSS within the browser can as well).
If you are looking to have more control, you may want to consider using a JavaScript replacement for the native select box.
In answer to your question, however, the coloration on the form elements is likely a system-wide OS setting. (In Windows, this is controlled in the same place as where the color of the window chrome is controlled.)

underline line thickness always one pixel

...regardless of font size.
Its an mx:Text object. (The Text object is actually being used as a mask so don't know if that's the problem.) If underline is set with the <u> tag in Text.htmlText, or Text.textField.setTextFormat, the underline thickness is always just one pixel which is not acceptable. (There are other problems with <u> so I'm limited to using setTextFormat currently.)
Can the thickness of an underline be set through CSS? (textField.styleSheet, etc.)
I may have another problem as I already use setTextFormat extensively, and the documentation says you can't use textField.setTextFormat if you use textField.setStyleSheet.
I primarily need the underline to simulate correctly the look for an anchor tag.
its not even possible to do in html (you need to use border-bottom). i don't think this is possible.
Not possible with CSS or TextFormat.
A possible workaround would be using the textfield metrics (probably through getCharBoundaries()) to manually draw a line under the desired text. It can get quite messy for multiline text though.

Resources