Is there a simple way to make html textarea and input type text equally wide?

Tags: textarea css html
Question!

Is there a simple way of getting a HTML textarea and an input type="text" to render with (approximately) equal width (in pixels), that works in different browsers?

A CSS/HTML solution would be brilliant. I would prefer not to have to use Javascript.

Thanks /Erik



Answers

Use CSS3 to make textbox and input work the same. See jsFiddle.

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}
By : Justin


input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }


you can also use the following CSS:

.mywidth{
width:100px;
}
textarea{
width:100px;
}

HTML:

<input class="mywidth" >
<textarea></textarea>
By : vitaj


This video can help you solving your question :)
By: admin