change width of input field depending on browser?

Question

Hi

i have an input field and i want it to be 2 different sizes in internet explorer and firfox if possible, the code i have right now is:

div.search input#query {

  width: 450px;
  height: 24px;
  font-size: 16px;
}

so i want somthing like this:

div.search input#query {

if internet explorer {  width: 450px;}
else {  width: 350px;}
  height: 24px;
  font-size: 16px;
}

thanks

Answer 1

It's not possible to target a specific directly in a clean way (without CSS hacks) except for Internet Explorer that is aware of conditional comments.

You could put all the IE specific properties into a separate style sheet and embed that after the main stylesheet (so it overwrites the existing settings):

<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css">
<![endif]-->

you will probably want to discriminate between various versions of IE, as IE 6, 7 and 8 tend to behave differently in many respects.

Answer 2

you can use this script :

http://rafael.adm.br/css_browser_selector/

after you include this script you can easy use in the css.