Website appearing different from chrome to firefox

Question

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.

Its hard to say without source. From the look of the two images I'd say there's a class (or more) active on the entire of the Firefox version. There seems to be a red border on the information textarea in the Firefox version. Was there an attempted submission and validation failed and somewhere along the line a class was applied? — Rob Gray

Sergio Sergio · Accepted Answer · 2017-03-20T10:22:43

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.

Website appearing different from chrome to firefox

1 Answers