Media queries for each browser

Question

I want to resize my input field as per browser. can I write media query for each browser so separate width for input field on separate browser, like for mozilla it will have separate width on chrome and opera it will have separate width.

Answer 1

Media queries are media queries, not browser queries. They are there to test certain properties of the viewport, device or display. There are no media features that let you test for a certain browser.

Answer 2

If you want to do this you should be able to find something on browserhacks.com which has a bunch of code samples to explain how to get a browser with css media queries so for IE you might do something like this.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}

This works because the only browser that those rules will apply on is Internet explorer