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
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.
Inorder to have specific CSS for each browser,you may need to use browser specific hacks
Check the following article
http://www.paulirish.com/2009/browser-specific-css-hacks/
Hope this helps.
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
http://www.paulirish.com/2009/browser-specific-css-hacks/
Browser specific hack is the solution for it!!!
if you want you use conditional CSS: http://www.conditional-css.com/advanced