CODEWITHSUNDEEP
htmlcss
Asim Zaidi
Asim Zaidi

Reputation: 28324

How to style a text field so it doesnt have a border?

I have a text field and I dont want to show border around it as it is a read-only text field. How can I make it to appear without the border and without the background color?

Upvotes: 1

Views: 6291

Answers (5)

ttchong
ttchong

Reputation: 317

<html>
<head>
<style type="text/css">
   input.asLabel
   {
      border: none;
      background: transparent;
   }
</style>
</head>
<body>
<form>
    <input class="asLabel" type="text" value="See, don't touch :)" disabled/>
</form>
</body>
</html>

Upvotes: 2

meder omuraliev
meder omuraliev

Reputation: 186662

#input { border:0; background:transparent; }

Upvotes: 2

user57508
user57508

Reputation:

since you did not give any information about the css version, here's an example:

<style type="text/css">
    input[type=text]
    {
        border: 0px;
        background: transparent;
    }
</style>
<input type="text" value="helllo" />

working demo

Upvotes: 5

Jason Brant
Jason Brant

Reputation: 182

Tried something along the lines of:

<input class="noBorderAndBackground" type="text" />

noBorderAndBackground{
   background-color:white;
   border-style:none;
}

Upvotes: 1

casablanca
casablanca

Reputation: 70721

#your_text_field {
  border-style: none;
  background-color: transparent;
}

Edit: Oh well, what do you know, transparent actually works on IE6. I remember it not working for certain attributes, such as border.

Upvotes: 2

Related Questions