CODEWITHSUNDEEP
google-chromefirefoxrendering
samson4649
samson4649

Reputation: 71

Website appearing different from chrome to firefox

Im having some issues with how the content on a website im designing is appearing.

The content was originally designed and working normally in chrome but when I open the site in firefox or chrome on android i get the following issue.

Screenshot in Chrome

Screenshot in Firefox

The site is being rendered exactly the same through the inputs have a black background and the main div appears to have a shadow over it.

If anyone has had a similar issue that they have been able to solve Id greatly appreciate it.

Upvotes: 1

Views: 40

Answers (1)

Sergio
Sergio

Reputation: 28845

Looks like Firefox adds automatically a red border for :required fields.

If you want to override this behavior you can do:

input:required {
    box-shadow: inherit;
}

I ended up doing

input:required {
    box-shadow: inherit;
}
input:focus {
    box-shadow: 0px 0px 2px 2px #7AA6ff;
}

to have a normalized behavior cross-browser.

Upvotes: 0

Related Questions