Chrome CSS failing - css

Question

Hi I am trying to change the css for a select element, and it works fine in firefox but it doesnt work in google chrome. When I tried to use the Chrome Developer tool, I see that under Styles/Matched CSS Rules the elements height is successfully changed to 30px but when I go to Computed Style the height shows up as 18px but when I click the arrow to get more information it shows that the height should be 30px
#new-job select - 30px
I am new with html/css and chromes developer tools, but it seems like it should be working to me. Here is my code
<div id="new-job">
<form accept-charset="UTF-8" action="/jobs" class="new_job" id="new_job" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="vfKmC+vnnIl/6icDIbDRfZghNR927qmEqTdB9I2OeMQ="></div>
<div class="field">
<label for="job_category">Category</label>
<select id="job_category" name="job[category]"><option value=""></option>
<option value="Bistro Card">Bistro Card</option>
<option value="Dongle">Dongle</option>
<option value="Return">Return</option>
<option value="Catering">Catering</option>
<option value="Other">Other</option></select><br><br>
</div>
<div class="field">
<label for="job_location">Location</label><br>
<input id="job_location" name="job[location]" size="30" type="text">
</div>
<div class="field">
<label for="job_description">Description</label><br>
<textarea cols="40" id="job_description" name="job[description]" rows="20"></textarea>
</div>
<div class="actions">
<input class="button small radius" id="submit-job" name="commit" type="submit" value="create job">
go back
<div id="new-job-errors"> </div>
</div>
</form>
</div>
And heres my CSS
#new-job {
select {height: 30px;}
}

Answer 1

the correct syntax should be
#new-job select {
height: 30px;
}

Answer 2

To select the select element you can use the assigned id, or the tag itself.
An example of both is here - http://jsfiddle.net/9HndG/
In your css, it would look like this:
by id
#job_category{
height:30px;
}
by tag
select{
width:200px;
}
by both
select#job_category{
height:30px;
}

Answer 3

add some style in your <select>
<select id="job_category" name="job[category]" style="height:30px;">...