2

After reading the thread Input size vs width

I'm clear that we should not use size attribute but css style.

What will be the cross browser css that shows exactly 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 any help.

Community
  • 1
  • 1
rajakvk
  • 9,775
  • 17
  • 46
  • 49

6 Answers6

2

You will probably get more consistent results with different browsers by applying a CSS reset first. This article lists some good examples:

https://stackoverflow.com/questions/116754/best-css-reset

Once you have eliminated the subtle browser differences on padding and margins, then your master width of 60ex should allow the inputs to line up.

Community
  • 1
  • 1
ferdley
  • 2,882
  • 2
  • 18
  • 7
  • Sadly, that question was removed, but this links to www.css-reset.com, which has some helpful info on CSS resets (shocking) for us poor n00bs who need them ;). [link](http://www.css-reset.com/) – Jaime Mar 13 '13 at 17:32
1

The native padding for text input elements differ. You will need to assign a different width to input elements and textarea elements and experiment.

#form input.textfield { width:10em; }
#form textarea { width:9em; }

Just throw some default styles ( I prefer ems ) and pop open Firebug and experiment by changing the size values.

I usually throw a class=textfield on <input type=text> so I don't target <input type=submit> or similar.

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
  • Note that you can target `input[type="text"]`, as well, to avoid styling submit buttons (though it doesn't work with IE6). – Dave Jarvis Mar 10 '15 at 16:26
0

I would avoid a generic CSS reset, but use something like this:

input[type="text"], input[type="password"], textarea {
    width: 60ex;
    margin: 0;
    padding: 2px; /* it's 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're in standards mode and not quirks mode this should work fine for most browsers.

Notes:

  • The attribute selectors - [type="text"] - don't work in IE6 so you may wish to opt for a class name instead.
  • You can't get all browsers to display form fields exactly the same way.
  • Using ex as the unit, whilst a good idea, might not work well in a fixed-pixel width environment.
DisgruntledGoat
  • 70,219
  • 68
  • 205
  • 290
0

Use pixel rather than EM or pct values. 60px = 60px across all browsers, regardless of base font size.

Chris Bloom
  • 3,526
  • 1
  • 33
  • 47
0

I'm late to this party, but in case anyone runs into this and needs to use ex's for width, I finally got it to work.

Textareas by default use monospace for their font-family. So, you'll need to override that. 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 Fiddle to demonstrate: https://jsfiddle.net/Lxahau9c/

Rob
  • 2,080
  • 4
  • 28
  • 48
-1

padding left and right 0px

Jose
  • 1