Geek Answers Handbook

Styling the width of the input field Cross Browser

I have a delivery / billing input form, and I am having problems setting input fields to equal width ...

Problem:
-a field <input type="text" size="X" /> displayed in different browsers of different sizes (see link ).
Also, select fields that appear to be displayed differently.
-Chrome / safari does not seem to respond to the font-size property for the selected fields.

Any guidance on styling text input size and selecting cross browser fields would be very helpful.

Should I cause each browser to have a different layout ... only for these input fields? -Thanks

+6
input cross-browser styling
source share
2 answers

First remove this inline size attribute. You must use CSS to style the input form:

 input[type="text"] { width: 100px; /* You can also style padding, margins and everything else, * just remember that inputs of type "text" can only be one line. */ }

Do not use [type = "text"] as a selector. I just used it in this example to associate with text input fields, but it is not fully supported by the cross browser. You must give your text fields your own class to style with.

Also, don't forget your CSS reset to make sure your fields, borders, etc. et al. reset for all browsers. http://meyerweb.com/eric/tools/css/reset/

+4
source share

It is currently possible to normalize the width of the "dimensional" inputs using the ch block, which has achieved decent browser support.

Unfortunately, recording is still not possible:

 input[size] { width: attr(size) "ch"; }

So, we have to create the width that we know, we will use:

 input[size="10"] {width: 10ch;} input[size="20"] {width: 20ch;} input[size="30"] {width: 30ch;} /* etc. */

This can be easily automated using a CSS preprocessor.

UPDATE:

I made a test script . Today (February 2018), this works on Windows 10 with Chrome 63, Edge 41, FF 58. In IE 11, it fails. I have not tried OS X.

0
source share

More articles:


All Articles