n1875621
asked on
changing the style of 'disabled' elements in html style sheets???
i want to able to change the font color of the style of 'disabled' html elements....
for example
<input type="edit" name="test" value="value here" DISABLED>
prints the input box all greyed out - which is what i want, but i can barely read the value so i want to be able to change that to a darker - blacker font color.....
adding style="font-color: #000000;" doesn't work.
any ideas?
for example
<input type="edit" name="test" value="value here" DISABLED>
prints the input box all greyed out - which is what i want, but i can barely read the value so i want to be able to change that to a darker - blacker font color.....
adding style="font-color: #000000;" doesn't work.
any ideas?
ASKER
it doesnt work.... for some reason the disabled paramater is taking precendence over the color attribute.
i imagine its a whole new attribute, like "disabled-color: #000000" or something
i imagine its a whole new attribute, like "disabled-color: #000000" or something
You could always create a class for displaying the data, and store the data in a hidden field if you need to use it again.
<!-- in your css file or header -->
.disabled{
border: 1px solid #000;
}
<!-- in the body -->
<span class="disabled"> value here </span> -- Just use this for display
<input type="hidden" name="test" value="value here" > -- Store actual data here
it is really bulkwork around, but I haven't had any luck with anything else I have tried.
you could also try !Important to see if this will over ride the setting
style="color:#000000 !important;"
Good luck
<!-- in your css file or header -->
.disabled{
border: 1px solid #000;
}
<!-- in the body -->
<span class="disabled"> value here </span> -- Just use this for display
<input type="hidden" name="test" value="value here" > -- Store actual data here
it is really bulkwork around, but I haven't had any luck with anything else I have tried.
you could also try !Important to see if this will over ride the setting
style="color:#000000 !important;"
Good luck
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
readonly works really well for edit boxes, but for select boxes it still allows me to change the value.... any idea there?
i found this at w3c
17.12.1 Disabled controls
Attribute definitions
disabled [CI]
When set for a form control, this boolean attribute disables the control for user input.
When set, the disabled attribute has the following effects on an element:
Disabled controls do not receive focus.
Disabled controls are skipped in tabbing navigation.
Disabled controls cannot be successful.
The following elements support the disabled attribute: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA.
This attribute is inherited but local declarations override the inherited value.
How disabled elements are rendered depends on the user agent. For example, some user agents "gray out" disabled menu items, button labels, etc.
In this example, the INPUT element is disabled. Therefore, it cannot receive user input nor will its value be submitted with the form.
<INPUT disabled name="fred" value="stone">
Note. The only way to modify dynamically the value of the disabled attribute is through a script.
17.12.1 Disabled controls
Attribute definitions
disabled [CI]
When set for a form control, this boolean attribute disables the control for user input.
When set, the disabled attribute has the following effects on an element:
Disabled controls do not receive focus.
Disabled controls are skipped in tabbing navigation.
Disabled controls cannot be successful.
The following elements support the disabled attribute: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA.
This attribute is inherited but local declarations override the inherited value.
How disabled elements are rendered depends on the user agent. For example, some user agents "gray out" disabled menu items, button labels, etc.
In this example, the INPUT element is disabled. Therefore, it cannot receive user input nor will its value be submitted with the form.
<INPUT disabled name="fred" value="stone">
Note. The only way to modify dynamically the value of the disabled attribute is through a script.
ASKER
I am aware of all that.... so how do i change the color? :)
hmm.. it seems to me that c.d. is once again, correct...
I can conceptualize a way to make it work, but it would be *a lot* of work for what you want...
you could use readonly, as was already suggested, and you could (here comes the ugly part) remove all of the options from the select except the one you want. i don;t even know if it would work....
that or maybe you could write a script such that when the select gets focus, you set the focus to something else... again i don;t know if it will work.
I can conceptualize a way to make it work, but it would be *a lot* of work for what you want...
you could use readonly, as was already suggested, and you could (here comes the ugly part) remove all of the options from the select except the one you want. i don;t even know if it would work....
that or maybe you could write a script such that when the select gets focus, you set the focus to something else... again i don;t know if it will work.
or, another off the wall idea that may or may not work for you...
have a text field next to the select. normaly the field is has visibility set to hidden (or display: none). when you would normally disable the select, you fill the filed with it's value, set the file d to visible and readonly, and set the selct to visible: hidden.
have a text field next to the select. normaly the field is has visibility set to hidden (or display: none). when you would normally disable the select, you fill the filed with it's value, set the file d to visible and readonly, and set the selct to visible: hidden.
let me translate that into something more closely related to english... pseudocode!
function disableselect {
field.value = select.value
select.visibility = hidden
field.readonly = true
field.visibility = visible
}
function enableselect {
field.visibility = hidden
select.visibility = visible
}
function disableselect {
field.value = select.value
select.visibility = hidden
field.readonly = true
field.visibility = visible
}
function enableselect {
field.visibility = hidden
select.visibility = visible
}
This is probably about as close as you can get to a manual disable of a select. You have to manage it with an additional property to flag the disable state. You can't use onFocus because it fires too late an the focus has already shifted to the dropdown portion of the control. You also can't set blur reliably on a select so you have to set focus to another field, and yu have to do it off of an on click. This is still far from perfiect. The browser can get fooled, and if you hold down the mouse button it will show the drop down portion for as long as you hold it down.
So your options appear to be: A- live with the greyed out control. B- use a very unreliable to get an effect of dubious value. C- use something other than a select to display what you want.
<html><head></head>
<body>
<form name="theform">
<select disableflag="off" onChange="if (this.selectedIndex==2) this.disableflag='on'"
onClick="if(this.disablefl
<option value="good money">good money
<option value="better money"> better money
<option value="no money"> no money
<option value="other stuff"> other
</select>
<input type="text" name="tfld" value="$1,000">
</form>
</body>
</html>
Cd&
So your options appear to be: A- live with the greyed out control. B- use a very unreliable to get an effect of dubious value. C- use something other than a select to display what you want.
<html><head></head>
<body>
<form name="theform">
<select disableflag="off" onChange="if (this.selectedIndex==2) this.disableflag='on'"
onClick="if(this.disablefl
<option value="good money">good money
<option value="better money"> better money
<option value="no money"> no money
<option value="other stuff"> other
</select>
<input type="text" name="tfld" value="$1,000">
</form>
</body>
</html>
Cd&
yet another somewhat random idea: run a script onChange. If disabled == false; store value in a variable. if true, set the value to the stored variable
/*PSEUDOCODE*/
var selstore;
function selectdisable(this) {
if(this.disabled == false) {
selstore = this.selectedIndex()
}
else { //disabled == true
this.selectedIndex() = selstore
}
}
this question seems to have sparked my muse ;), though i have to say, i wish i could come up with a way to do it in CSS.
I don't see why there shouldn't be a input[disabled] {} selector... I mean, what if i don't want my disabled elements to be grey?
/*PSEUDOCODE*/
var selstore;
function selectdisable(this) {
if(this.disabled == false) {
selstore = this.selectedIndex()
}
else { //disabled == true
this.selectedIndex() = selstore
}
}
this question seems to have sparked my muse ;), though i have to say, i wish i could come up with a way to do it in CSS.
I don't see why there shouldn't be a input[disabled] {} selector... I mean, what if i don't want my disabled elements to be grey?
well,
you can change the color!
use this input tag
<input type="edit" name="test" style="color: #121291;" value="value here" onkeyup="this.value='value
if the user wanted to change the value, the script puts the value back :)
just a simple trick.
you can change the color!
use this input tag
<input type="edit" name="test" style="color: #121291;" value="value here" onkeyup="this.value='value
if the user wanted to change the value, the script puts the value back :)
just a simple trick.
The selectors CSS3 module, which is currently as Candidate Recommendation status, has :enabled and :disabled pseudo-classes.
http://www.w3.org/TR/css3-selectors/#UIstates
The purpose of the :enabled pseudo-class is to allow authors to customize the look of user interface elements which are enabled - which the user can select/activate in some fashion (e.g. clicking on a button with a mouse). There is a need for such a pseudo-class because there is no way to programmatically specify the default appearance of say, an enabled input element without also specifying what it would look like when it was disabled.
Similar to :enabled, :disabled allows the author to specify precisely how a disabled or inactive user interface element should look.
It should be noted that most elements will be neither enabled nor disabled. An element is enabled if the user can either activate it or transfer the focus to it. An element is disabled if it could be enabled, but the user cannot presently activate it or transfer focus to it.
Too bad it looks like no browsers yet support these pseudo-classes.
Mozilla bug 84400:
Support :disabled and :enabled pseudo-classes [SELECTORS]
http://bugzilla.mozilla.org/show_bug.cgi?id=84400
http://www.w3.org/TR/css3-selectors/#UIstates
The purpose of the :enabled pseudo-class is to allow authors to customize the look of user interface elements which are enabled - which the user can select/activate in some fashion (e.g. clicking on a button with a mouse). There is a need for such a pseudo-class because there is no way to programmatically specify the default appearance of say, an enabled input element without also specifying what it would look like when it was disabled.
Similar to :enabled, :disabled allows the author to specify precisely how a disabled or inactive user interface element should look.
It should be noted that most elements will be neither enabled nor disabled. An element is enabled if the user can either activate it or transfer the focus to it. An element is disabled if it could be enabled, but the user cannot presently activate it or transfer focus to it.
Too bad it looks like no browsers yet support these pseudo-classes.
Mozilla bug 84400:
Support :disabled and :enabled pseudo-classes [SELECTORS]
http://bugzilla.mozilla.org/show_bug.cgi?id=84400
You could replace the SELECT box with a pseudo select div when not active. (similiar to what Fendrin suggested above)
http://slayeroffice.com/code/dhtml_select.html
https://www.experts-exchange.com/questions/20704530/Overriding-Z-Index-for-a-Select-dropdown.html
http://slayeroffice.com/code/dhtml_select.html
https://www.experts-exchange.com/questions/20704530/Overriding-Z-Index-for-a-Select-dropdown.html
hey, here's the REAL way to do this... i figured there had to be a way.
http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors
of course whether or not any browsers support it is a separate issue.
being css2, it is doubtful even in the most modern of browsers.
http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors
of course whether or not any browsers support it is a separate issue.
being css2, it is doubtful even in the most modern of browsers.
style="color:#000000;"
That should work.