How do i make my registration forms and login forms look the same in different browsers?
Hi there iankane2003,
and a warm welcome to these forums. 
This may or may not be possible. 
Why do you think that it is actually important?
coothead
2 Likes
Can we see your code?
Hi iankane2003 welcome to the forum
Short answer. You can’t. It is more important for a browser user to have forms look consistent across sites, than it is for a site to have a form look consistent across browsers.
That said, forms can be styled so that they look acceptable, the chances are not so great that many visitors will be using multiple browsers, and of those that do, not all of them will care if even notice.
Of course if the form design is unacceptable in a certain browser, that should be addressed,
For example, say I want nice rounded corners. But a browser that doesn’t support that gets square corners. It isn’t all that bad is It?
4 Likes
So, what part of the forms did you want to look the same?
You can add a big image, that users can relate to, that will look the same in different browsers.
It may be helpful if you show examples of what you want to do or what you see is wrong.
Form elements vary greatly between browsers but usually this won’t matter much if you have gone with defaults for everything. It becomes difficult once you start altering the form elements default appearance as some browsers allow some parts to be changed while others do not.
That is to say that its not impossible to do some standardisation but you do need to be proficient in css and understand the implications.
There are attempts to normalise form elements but its a lot of code you could do without if you can just change your thinking a little.
The main culprit is the select element which is hard to style but if you really must change it then there are certain things you can do. The following is a really old example that catered back to IE8 but these days you could leave out anything that refers to ie10 and under.
As you can see it requires a certain structure and complicates the html a little and the css is also quite complicated. Sometimes unless you are really proficient then its best to go with sensible default appearance and at least you know they will work 
2 Likes
If you open match.com in a few different browers all their sign up forms look the same. The drop down buttons on their forms appear exactly the same. When i look at mine they are all different. When i looked at facebooks sign up page theirs were different like mine. So I am thinking it might not be such a bad thing. But i like the consistency of design that match.com use and want to know how to do the same thing. It’s mainly just the drop down boxes that i am bothered about and i need these.
I would include code but there is no point. It’s just code for a form with a bit off css.
Just thought someone might know. I will keep looking,
All the best
They are similar but not the same on my browsers.
All those match com images are just using a select element and I already gave you the code to create those selects in the codepen I posted. All other methods will be basically using the same sort of code. They use prefixed versions of apperarance:none to remove default styling and then style it with their own rules.
As mentioned above if you supply what you have tried so far then we can help fine tune it for you. Also when you look at sites like the one you mentioned you can just inspect the element with the developer tools and all the rules they use are evident to learn from.
I see what you mean. And of course that if someone uses a particular browser they are not going to just go to a different browser to see if it looks the same or even care. They stick to one browser and as long as it works who cares. I am over thinking the problem which now is not a problem anymore. Thanks for contribution. I’ll them as they look in their respective browsers and deal with all the other problems i have to solve.
Thanks again to everyone.
Cheers
2 Likes
The only way to have all types of form elements look the same in every browser will be to use custom form like components built from none form element html elements. Probably more trouble than it is worth unless you are already using a library / framework that provides that for you.
Another consideration is that people who use a particular browser will be used to how forms look in that browser, so if you try to make the form look like it would in another browser, it might be off-putting. There’s no real advantage, but a lot of pain and risk of messing the form functionality up.
3 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.