CODEWITHSUNDEEP
csstextboxstyles
Hcabnettek
Hcabnettek

Reputation: 12928

CSS question - transparent underlined textbox - howto?

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

Upvotes: 4

Views: 12719

Answers (3)

Joshua Simon
Joshua Simon

Reputation: 825

Try to set your left, right and top borders values to be none

#textarea {
    font-size: large;
    letter-spacing: 2px;
    height: 20px;
    border: 2px solid gray;
    padding:10px,20px;
    width: 50%;
    overflow: hidden;
    resize: vertical;
    min-height: 30px;
    line-height: 20px;
    outline: none;
    border-top:none;
    border-left: none;
    border-right: none;
  }
  
 <textarea name="textarea" id="textarea" cols="30" rows="10" placeholder="Your message here.."></textarea>

Upvotes: 0

richardtallent
richardtallent

Reputation: 35363

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;
}

Upvotes: 6

Greg
Greg

Reputation: 321578

This should do it:

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

Tested in IE8 (IE7 compatability mode)

Upvotes: 20

Related Questions