469,271 Members | 1,790 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,271 developers. It's quick & easy.

background color of a textbox

Hello,

I was wondering if there is any cross-browser CSS way to specify that I
want the background color of a readonly input text field to be the same
as its parent row. Right now, I have

<tr class="myRowClass">
<td align="right">Account Username</td>
<td align="left">
<div id="loginMsg" name="loginMsg"><input
style="color:red; font-size:90%" type="text" readonly id="msg"
name="msg" value="" size="120"></div>

For the input with id "msg", currently on Firefox and IE the background
is white, even though the row background is blue.

Thanks for any advice, - Dave

Jan 19 '06 #1
1 11241
la***********@zipmail.com wrote:
I was wondering if there is any cross-browser CSS way to specify that I
want the background color of a readonly input text field to be the same
as its parent row.
An input field cannot have a (table) row as its parent, only as a more
remote ancestor.

The most useful piece of advice here is probably this: don't mess around
with styling forms, and in particular don't use any fancy background,
and especially if you use readonly fields (you normally shouldn't),
don't prevent browsers from rendering them as readonly to the extent
they can.

Since people so seldom wish to make use of the best advice, here's the
less relevant tech stuff:
<div id="loginMsg" name="loginMsg"><input
style="color:red; font-size:90%" type="text" readonly id="msg"
name="msg" value="" size="120"></div>
Setting the size to 120 is wrong. There's no sense in making the visible
width of a field 120 characters. If you expect such an amount of data,
use textarea.
For the input with id "msg", currently on Firefox and IE the background
is white, even though the row background is blue.


No, the background of the input element is what other style sheets say,
since your style sheet does not say anything about it. For all that you
can know, it could be red.

You could use background: transparent for the <input> element. In
principle, you should use the same for the <div> element enclosing it
(why do you have that markup?) and for the enclosing <td>, but in
practice their backgrounds most probably default to transparent.

In theory, you could also use background: inherit, which is what you are
asking for. But it's poorly supported: no support on IE.

On the other hand, by setting the background, you make it more difficult
to users to recognize that the input field is disabled.

I wonder what might be a justifiable reason to make a field for login
meesage readonly. After all, the only way to change the readonly status
is via client-side scripting, which means that it is guaranteed not to
work for a considerable number of users. If the login name is actually
obtained from existing information, such as data previously supplied by
the user, then there's no reason to make it an input field; you can
instead display it as normal content, if it is relevant.

BTW, setting font-size: 90% is a bad idea. Setting the font size to 100%
makes more sense. (It's not a dummy setting, since browsers generally
have a reduced font size for input fields by default. This is just mad,
since input fields, if anything, should have the font size chosen by the
user - if not larger. Surely people should be able to see what they
type, and reducing the size for esthetic reasons is... arrogant.)
Jan 19 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Steve | last post: by
3 posts views Thread by A.M | last post: by
1 post views Thread by slyi | last post: by
3 posts views Thread by bulwark_jrm | last post: by
1 post views Thread by da5namroi | last post: by
8 posts views Thread by Marco Pais | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.