Input width vs textarea width
After reading the topic Input size vs width
I understand that we shouldn't use the size attribute, but css style.
What would be a cross-browser css that shows exactly the same width for both input [text] and textarea?
BTB, I tried
#idInputText, #idTextArea {
font: inherit;
width: 60ex;
}
Is it correct? any better solution?
Thanks in advance for your help.
source to share
Internal padding for text input elements is different. You will need to assign different widths for the input and textarea elements and experiment.
#form input.textfield { width:10em; }
#form textarea { width:9em; }
Just drop some default styles (I prefer ems) and Firebug pops up and experiment changing the sizing values.
I usually cast class=textfield
on <input type=text>
, so I don't aim for <input type=submit>
or the like.
source to share
You will probably get more consistent results across browsers by applying CSS reset first. This article provides some good examples:
https://stackoverflow.com/questions/116754/best-css-reset
Once you have eliminated the subtle differences between the browser on padding and margins, then your max width of 60ex should allow the inputs to line up.
source to share
I would avoid generic CSS reset, but use something like this:
input[type="text"], input[type="password"], textarea {
width: 60ex;
margin: 0;
padding: 2px; /* it best to have a little padding */
border: 1px solid #ccc; /* gets around varying border styles */
border-radius: 4px /* optional; for newer browsers */
}
As long as you are in standards mode and not quirks mode this should work fine for most browsers.
Notes:
- Attribute selectors -
[type="text"]
- don't work in IE6, so you can choose the class name instead. - You cannot force all browsers to render form fields the same way.
- Using ex as a device, while a good idea, may not work in a fixed pixel width environment.
source to share
I'm late to this party, but in case anyone comes across this and has to use ex for the width, I finally got it to work.
Text boxes use monospace for their font family by default. Thus, you need to override this. This css worked for me:
input[type="text"], textarea {
font-family: Arial, sans-serif;
border: 2px groove;
padding: 2px;
margin: 10px;
width: 35ex;
}
Here's a script to demonstrate: https://jsfiddle.net/Lxahau9c/
source to share