Text field borders unruly

[OsakaWebbie]

I have a few text fields (<input type=text>) that I want to change the appearance of based on the situation. When they are in use, I want them to look like they normally would: white with thin, dark gray borders (so that they match the numerous other fields on the page that I am not doing this to). When they are disabled, depending on the situation I either want only the background color changed to match the color behind it (which is not the default light gray of a disabled form field), or the whole thing to disappear without its size changing (the best way I see to do that is to change the border color to the same as the background; if I change the border style to none, the fields and the table cell they are in both shrink by a couple pixels, which looks strange). But the strange thing is that once I change either color from the default (whether inline CSS or dynamically in Javascript), the borders become a sortof beveled concave frame, rather than simple lines, and they stay that way even after I set the color(s) back to what they were. Do I have to literally set all the borders' style and width, even though currently I don't use those properties at all? The appearance of the borders is slightly different in IE and Firefox, but the basic problem happens in both.

And a related question: when I have changed a field to one of the inactive modes and want to change it back, how do I know my border color will match the default shade of gray chosen by the browser for the untouched fields? Or do I really need to literally set the attributes for all the fields on the page just so they'll match?

 

[BillyRayPreachersSon]

I think you've answered your own question. As you say, you cannot be sure what any specific browser or OS will do, will look like, or will behave when setting border or other style values on input fields. Therefore setting all properties might be your safest bet.

Hope this helps
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[tsdragon]

If you simply want to make them invisible, try using:

[i]field[/i].style.visiblity = "hidden"

That should work in both browsers.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[OsakaWebbie]

Tsdragon, thanks for suggesting "hidden". I had thought of it before, but assumed it would free up the space in the table cell and mess up the layout (if I didn't like the loss of the border, I knew I wouldn't like the loss of the whole thing!), so I didn't even try it. But at your suggestion I tried it, and it works fine, at least for the textboxes - I tried it on a button with no success, but perhaps I'm pushing my luck...

On the bigger issue, I added a CSS entry for "input.text", but it doesn't seem to work. If I remove the ".text" and let it be the settings for all inputs it works, but that's not what I want - I'm happy with the defaults for buttons and such, and would have no idea how to specify all the stuff to get them to look normal again. Here is the whole style section of my header:

<STYLE TYPE="TEXT/CSS">
<!--
body,p,div,span,td,input,textarea {
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;}
input.text {
  background-color: FFFFFF;
  border-color: 666666;
  border-style: solid;
  border-width: 1px;}
-->
</STYLE>

 

[Vragabond]

1. Hidden visibility means that the element is invisible but still takes up space. Display none would be the unwanted one here, making the element disappear and clearing up the space.

2. AFAIK visibility works with all visual elements in html. This

<input type="submit" value="Click" style="visibility: hidden;" />

works for me nicely.

3. Your CSS syntax for input text says: input element with a class text. If you do not put classes in inputs, that css rule will not be rendered. You are thinking of styling inputs with a type text rather than a class text. This can be done like this:

input[text] {
...
}

Bad thing is that this is not recognized in many browsers (I know Geckos can handle it, not sure about Opera, sure about IE not supporting it). That means you're left out with either styling all inputs the same and then applying classes to those that require different styling; or applying classes to all styled inputs.

 

[FesterSXS]

input.text in your CSS will only work to input elements that have class="text" applied to them. You cannot distinguish text boxes from other input types in your CSS by any other means (as far as I am aware)


Tony
[red]_________________________________________________________________[/red]
Webmaster -

http://www.SpiraxSarco.com/

 

[OsakaWebbie]

I use an "include file" (via PHP) to generate the header for all pages in my whole application, but I only need this tricky stuff on one page. I do want it to work in at least IE and Firefox (it's a private application, so I don't need to support the world, but I do use both those browsers).

The page I found "input.text" on was apparently in error - it said nothing about classes, but seemed to think that was what you say is "input[ text]". Hmph! I guess I'll need to put the one with the class in my CSS defs, and then add a class to all my textboxes on the page I care about. I'll try that when I get a chance (I'm busy with other stuff for a couple days) and let you know how it turns out.