making text box == text area?

[ameerulislam]

Bros,

How do you make text boxes and text areas render at same width in different browsers? Text boxes use width to define its width unlike text areas they use col's.. And the measurement of cols are different on different browsers. Thus you will get different weird shapes on different browsers. Any thoughts highly appreciated.

[ralph.m]

Just give them all a px width. E.g.

input[type="text"], textarea {width: 300px;}

[felgall]

Just give them all a px width.

you don't even need to use pixels for the width. Any unit will work to define them as being the same width as long as you specify it in the CSS.

The values specified in the HTML only need to be there for the extremely rare person who has CSS disabled. Since inputs generally display reasonably for that situation you would generally only specify a size for textareas in the HTML itself as a default size to display in this rare situation.

The other thing to note is that most browsers now allow textareas to be resized by the person filling out the form so just because you set it to the same width as the inputs doesn't mean it will stay that way if someone decides they want to make it wider.

[ralph.m]

Any unit will work to define them as being the same width as long as you specify it in the CSS.

I find that other units, like ems and %, get inconsistent results with inputs/textareas, so I tend to use px for these now. If you set both textarea and input to width: 60%, for example, one tends to appear wider than the other. Not sure why ... (that's with font sizes / fonts / padding etc all equalized, too ...)

[ameerulislam]

Just give them all a px width. E.g.

input[type="text"], textarea {width: 300px;}

It worked, I just had to be more specific like #myform input[type="text"], textarea {width: 500px;} as it was targeting all my text boxes around the site . Thanks!

[felgall]

It worked, I just had to be more specific like #myform input[type="text"], textarea {width: 500px;} as it was targeting all my text boxes around the site . Thanks!

Since all form fields need an id to attach the label to the field in a semantic way, why not just use a list of all the ids and not bother referencing whether they are input or textarea fields.

[ameerulislam]

Since all form fields need an id to attach the label to the field in a semantic way, why not just use a list of all the ids and not bother referencing whether they are input or textarea fields.

I'm not very clear here. Did u mean like this?
#myform {width: 500px;}
or
#myform input {width: 500px;}

[ralph.m]

I'm not very clear here.

Felgall is saying that each of your text inputs and textareas ideally should have a unique id, such as

<div>
					<label for="email">Email Address</label>
					<input name="email" type="email" id="email" value="">
				</div>
				
				<div>
					<label for="comm">Comments</label>
					<textarea name="comments"  id="comm"></textarea>
				</div>

So then you would style those inputs with something like

#email, #comm {width: 500px;}

It's not necessarily the most efficient option, though, especially if you have a lot of inputs/textareas.

Note that your code should have been this:

#myform input[type="text"], #myform textarea {width: 500px;}

rather than this:

#myform input[type="text"], textarea {width: 500px;}

[ameerulislam]

Felgall is saying that each of your text inputs and textareas ideally should have a unique id, such as

<div>
					<label for="email">Email Address</label>
					<input name="email" type="email" id="email" value="">
				</div>
				
				<div>
					<label for="comm">Comments</label>
					<textarea name="comments"  id="comm"></textarea>
				</div>

So then you would style those inputs with something like

#email, #comm {width: 500px;}

It's not necessarily the most efficient option, though, especially if you have a lot of inputs/textareas.

Note that your code should have been this:

#myform input[type="text"], #myform textarea {width: 500px;}

rather than this:

#myform input[type="text"], textarea {width: 500px;}

Yes yes you are dead right.. I should add #myform. Thanks! There is no way to target more than one child element in css without repeating the parent id? Is there something like #myform (input[type="text"], textarea) {width: 500px;} ? lol

[ronpat]

I think he means:

#myform, #yourform, #hisform, #herform {width:500px}

could also be written:

#myform,
#yourform,
#hisform,
#herform {
    width:500px;
}

[ameerulislam]

also this is pretty new for me

input[type=text]

I was wondering why it is like this input[type=text] instead of just 'text' just like 'textarea' and other tags in css ?

[ronpat]

also this is pretty new for me

input[type=text]

I was wondering why it is like this input[type=text] instead of just 'text' just like 'textarea' and other tags in css ?

You will find a good explanation of the attribute selector here:

http://reference.sitepoint.com/css/attributeselector

[ralph.m]

Is there something like #myform (input[type="text"], textarea) {width: 500px;} ? lol

No, not in regular CSS, although things like SASS or LESS etc. may do something like that. (It's hard for me to tell, though, from the other end of my 40 foot pole.)

also this is pretty new for me

input[type=text]

As Ron's link indicates, it's a way of targeting just some of the inputs. If you just used

input {width: 500px;}

that would also target the submit input, which looks pretty lousy. So

input[type="text"] {width: 500px;}

targets just inputs with a type attribute of "text".

[ameerulislam]

No, not in regular CSS, although things like SASS or LESS etc. may do something like that. (It's hard for me to tell, though, from the other end of my 40 foot pole.)



As Ron's link indicates, it's a way of targeting just some of the inputs. If you just used

input {width: 500px;}

that would also target the submit input, which looks pretty lousy. So

input[type="text"] {width: 500px;}

targets just inputs with a type attribute of "text".

My point was like textarea is an input too. So how come we type textarea without putting input in front of or go a step forward specifying the type. What I mean is why we don't say

input[type="textarea"] or input textarea ..

[ralph.m]

My point was like textarea is an input too.

No, it's not. <textarea> is an element in its own right, like <input>, or <p>, or <div>. So you target it in CSS as textarea { styles }. You can't target <textarea> as an <input>, because it isn't one.

[ameerulislam]

No, it's not. <textarea> is an element in its own right, like <input>, or <p>, or <div>. So you target it in CSS as textarea { styles }. You can't target <textarea> as an <input>, because it isn't one.

Wow.. That is an interesting discovery for me. I made my self count it as an input type. Good tricky quiz problem for newbies this one I guess.

[felgall]

It's not necessarily the most efficient option, though, especially if you have a lot of inputs/textareas.

If you have set the forms up to be accessible by properly labelling all the inputs and textareas and if you do it semantically (that is without making the field itself a part of the label) then you have to give each an id in order to attach the label to the field.

<label for="email">Email Address</label>
<input name="email" type="email" id="email" value="">

Since the id has to be there anyway to semantically attach the label you may as well use it to simplify your CSS and JavaScript references to that field.

Of course if you have lots of fields in the form then setting them all to a specific width would be easier done using input[type="text"] but most likely you will not want all of them to have the same width and so at least any that are not the same as the majority can be set using their id.

[ralph.m]

you have to give each an id in order to attach the label to the field.

Yes, of course. What I meant was that having to target a potentially long list of IDs in the CSS is less efficient than just targeting all the text inputs in one swoop with a single selector.