SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question making text box == text area?

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Just give them all a px width. E.g.

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

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by felgall View Post
    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 ...)

  5. #5
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Just give them all a px width. E.g.

    Code:
    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!

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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;}

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    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

    Code:
    <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

    Code:
    #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:

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

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

  9. #9
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Felgall is saying that each of your text inputs and textareas ideally should have a unique id, such as

    Code:
    <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

    Code:
    #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:

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

    Code:
    #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

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I think he means:
    Code:
    #myform, #yourform, #hisform, #herform {width:500px}
    could also be written:
    Code:
    #myform,
    #yourform,
    #hisform,
    #herform {
        width:500px;
    }

  11. #11
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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 ?

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    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

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    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.)

    Quote Originally Posted by ameerulislam View Post
    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

    Code:
    input {width: 500px;}
    that would also target the submit input, which looks pretty lousy. So

    Code:
    input[type="text"] {width: 500px;}
    targets just inputs with a type attribute of "text".

  14. #14
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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

    Code:
    input {width: 500px;}
    that would also target the submit input, which looks pretty lousy. So

    Code:
    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 ..

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    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.

  16. #16
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  17. #17
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

    Code:
    <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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by felgall View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •