CSS question - transparent underlined textbox - howto?

Question

Good Morning,

Quick CSS question. Does anyone know any quick css to make an underlined transparent textbox? I basically want the textbox to be invisible except for the bottom border. I need it to function normally. Do I just remove left, right, and top borders and set it's background to transparent or something? Any examples of how to properly accomplish this? This app is for IE7 if that's relevant. Any help is always appreciated.

Cheers, ~ck in San Diego

Answer 1

This should do it:

input.myBox
{
    border: 0px solid #000000;
    border-bottom-width: 1px;
    background-color: transparent;
}

Tested in IE8 (IE7 compatability mode)

Answer 2

Just a suggestion... since people are not going to be used to this, you may want to add a hover pseudoclass as well to change the color slightly when the user mouses over the field, as an extra visual "hint" of what's going on.

Example:

input.myBox:hover
{
   border-color: #000066;
   background-color: #FFFFF7;
}