[thelist] Javascript + CSS Magic to "reveal" form field
Jono
ox4dboy at comcast.net
Tue Aug 17 16:24:34 CDT 2004
I have a checkbox that, when clicked, will alter the style of a few elements
so that they will go from being "dim" to being "dark" Below is a sketch of
what I an trying to do:
----------------------<tr1>------------------------
| | Check to reveal the text field and label below
----------------------<tr2>------------------------
Text field label | Text Field |
----------------------<tr3>------------------------
When the user clicks the checkbox for "Click to reveal the element below"
the label and text field in the second table row (tr2) will appear.
.dim input { /* style applied to the dim text field */
background: #fff; /* and text field label before the user */
color: #fff; /* clicks the checkbox */
border: 1px solid #ccc;
}
.dark input { /* style applied to the dark text field */
background: #fff; /* and text field label after the user */
color: #ccc; /* clicks the checkbox */
border: 1px solid #ccc;
}
In a nutshell, I need a check box to toggle the styles from "hidden" to
"shown" for the text field and label. I'd rather the label and text field
be grayed out by default/initially and then become dark after the checkbox
is clicked.
If this is not the best JS + CSS approach, can someone please steer me in
the right direction?
Thanks
More information about the thelist
mailing list