What is user agent stylesheet inspect?

Hello there, I managed to style the submit button quite ok, but still no luck with the input fields. I tried almost everything i found on these answers, but nothing works.

I need to change border, background and height of the input fields. What’s the proper way to recall it?

Thanks a lot

Hello @irenella

Do you know how to use the inspector on your browser? It tells you exactly what classes you need to use. You can also edit it right in the inspector, see how it’s going to look then copy your changes into your style sheet.

This is the best way to figure out what styles our plugin is applying to forms and what styles your theme is applying. Every theme is different so there is no copy/paste CSS that will work for every website.

Here is an article on how to inspect elements on every browser:
https://www.lifewire.com/get-inspect-element-tool-for-browser-756549

I personally prefer Firefox Web developer edition.

I hope that helps!

Stay well.
-Tracy

hello! Thank you for your reply. Yes, I did use the inspector and this is the problem: when i add some custom css in the inspector it works perfectly on preview. When I try to copy-paste everything from the inspector (literally everything just to be sure, but i also tried class by class) to my custom css section, nothing changes.

This reply was modified 2 years, 3 months ago by irenella.

Hi @irenella

Do you have any caching on your site? I do see you’re using a minification plugin.
Is your code there now?

-Tracy

Hello @irenella,

Just checking in.

Please let us know if you still need help with this issue.

Thank you!
-Tracy

Hello @irenella,

We haven’t heard back from you in a while so I am going to close out this ticket.

If you need more help, please reopen it and we will be happy to help you.

Thank you!
-Tracy

Every browser comes with some default style information. Which is used in case a particular webpage does not contains any style defined. For example if a web page contains standard HTML tags like H1, Button, Input etc. but does not contains any css along side the HTML. In that case the browser still needs to render the HTML tags to the end user. To facilitate this each browser like Chrome, Safari, Firefox etc comes with a default style sheet.

Key points
User Agent References

The default style sheet provided by the browser it self is called user agent stylesheet. Following screenshot shows an example of css for H1 provided by user agent style sheet on Chrome.

To override the browser specific defaults we can employ multiple techniques such as Reseting the user agent CSS or Normalize the user agent CSS. CSS Reset tries to remove all the default browser supplied styles where as Normalize CSS tries to standardize the different defaults across all browsers

Different browsers set different default CSS rules.
Default CSS links for some of the browsers are given bellow.
We can reset the default browser specific style.
We can also normalize the browser specif style to have standardize looks across all browsers.

User agent styles refer to the styles loaded by the default stylesheets within a browser. Firefox has some basic style rules that get applied to every page - for instance, links are blue and <h1> tags are big and bold with margins.

Sometimes these styles can interact with the styles you add to a page, which is why it is important that you can see them in devtools. I recently added a feature in Firefox 32 (currently Nightly) that lets you inspect these rules. See Bug 935803 for the implementation details.

Within the inspector, these styles behave pretty much like any other style on the page. It lists rules in the order of application, and you can see which rules have been overridden. There are a few ways that devtools distinguishes between the UA styles and normal styles:

They are not editable. Since you can’t change these files, you are not able to edit/disable them within the tools.
They are shown with a slightly different background color.
The links to the stylesheet open a popup window to view the source of a sheet instead of loading the sheet in the Style Editor. There isn’t much purpose for loading these in the style editor (see 1), but seeing the source of the sheet can still be nice for the curious.