CODEWITHSUNDEEP
html
user614946
user614946

Reputation: 619

How to make custom textbox?

I have seen many sites with many types of shaped textbox (for instance, someone has drawn it in paint and made it an HTML textbox). How are these textboxes made? I figured out that some kind of css is used but how to get that ..

Upvotes: 1

Views: 11678

Answers (2)

Coomie
Coomie

Reputation: 4868

Alternately you can use an image as a textbox background, which can really make things look awesome:

<style type="text/css">
 input{
  width:220px;
  height:50px;
  display:block;
  background:url(images/input.png);
  border: none;
 }
</style>

Upvotes: 1

Singular1ty
Singular1ty

Reputation: 2615

One way is to take advantage of CSS3 like below:

<html>
<head>
<style type="text/css">
.round{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
padding:10px;
}
</style>
</head>
<body>
<textarea rows="1" cols="10" class="round">Blah blab </textarea> 
</body>
</html>

In the same way, you could then add background images, more styling etc. like below. Hope that answers your question!

<html>
<head>
<style type="text/css">
.round{
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
padding:10px;
background:yellow;
border: 2px dotted red;
}
</style>
</head>
<body>
<textarea rows="1" cols="10" class="round">Blah blab </textarea> 
</body>
</html>

Upvotes: 0

Related Questions