This content originally appeared on Level Up Coding - Medium and was authored by The Tech Maker
How to make sure text input elements look the same in all browsers
When I started web development in the late 90s, getting web page layouts to look the same in every browser was a hard job. There was Netscape, later Mozilla, the early versions of Internet Explorer like 4,5 later IE6, Opera and some other, today forgotten, browsers. Even MAC OS had a special version of Internet Explorer.
All these browsers had a very poor implementation of CSS and rendered everything differently. Fortunately, this changed in the last few years. Apple started using the WebKit engine for Safari, followed by Googles Chrome, then Opera switched to WebKit, and yes, even Microsoft changed from Trident to WebKit with the latest Versions of Edge.
So noways, it’s much easier to make web pages look identically in every browser. But there are still a few little differences, special with input elements.
The Basic HTML Code Looks like This:
<input type=text />
Here are the results of different browsers for MAC OS X:
and here for Windows 10:
At first site, we see that all text inputs look very similar, except in Safari, and the element length varies from browser to browser.
Step 1:
Let’s say we want a 2px orange border with 4px rounded corners for our input. To avoid some unwanted spacing we set margin and padding to 0:
input {
margin: 0px;
padding: 0px;
border: 2px solid #ff6600;
border-radius: 4px;
}Result for MAC OS X:
Result for Windows 10:
Step 2:
Spacing, border and radius is done. Now we unify the font:
input {
margin: 0px;
padding: 0px;
border: 2px solid #ff6600;
border-radius: 4px;
font-family: arial, helvetica, sans-serif;
font-size: 16px;
line-height: 22px;
}Result for MAC OS X:
Result for Windows 10:
What does IE11 do here?
It ignores the line height! So we have to set the input’s height the same as the line height:
input {
margin: 0px;
padding: 0px;
border: 2px solid #ff6600;
border-radius: 4px;
font-family: arial, helvetica, sans-serif;
font-size: 16px;
line-height: 22px;
height: 22px;
}Now it looks pretty good:
Step 3
Finally we fix the width for all browsers with a fixed value, and we add some padding to get a nice space around the text in the field:
input {
margin: 0px;
padding: 1px 5px 0px 5px;
border: 2px solid #ff6600;
border-radius: 4px;
font-family: arial, helvetica, sans-serif;
font-size: 16px;
line-height: 22px;
height: 22px;
width: 200px;
}Result for MAC OS X:
Result for Windows 10:
Conclusion
Nowadays, browser differences are not so big, but they still exist. The best example here is Safari; remember the first screenshot. With a little styling, we can fix it.
By the way, a few months ago, I wrote a story about styling checkboxes and radio inputs, have a look:
Beautiful Radio- and Checkbox Inputs Only with CSS
One intention of writing this story was not only to show you how to fix browser differences for text inputs. I’d like to remind developers there are more browses in the world than the one you use every day. Even in 2022, we should/must test our code with various web browsers.
Happy coding!
3 Steps That Help Style HTML Text Input for All Common Web-Browsers was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by The Tech Maker
The Tech Maker | Sciencx (2022-06-14T11:58:08+00:00) 3 Steps That Help Style HTML Text Input for All Common Web-Browsers. Retrieved from https://www.scien.cx/2022/06/14/3-steps-that-help-style-html-text-input-for-all-common-web-browsers/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.