CSS targeting option with display: nobody works in Safari and IE

I ran into a weird CSS problem.

I have a dropdown selector similar to this HTML markup:

<select id="cat_p" name="cat_p" onchange="ListChildCategories(this.options[this.selectedIndex].value, 0);" class="required validate-list">
    <option value="-1" selected="selected">- Choose a category</option>
    <option value="1">Category 1</option>
    <option value="2">Category 2</option>
    <option value="3">Category 3</option>
    <option value="4">Category 4</option>
    <option value="5">Category 5</option>
</select>

Now I want to hide one of these choices (let’s say category 5) with CSS, so I use this CSS code:

select#cat_p option[value="5"] {
display: none;
}

And the result is perfect for Chrome and Firefox, but in CSS and IE this CSS doesn't work. I checked in the Safari developer panel and I see that the CSS is registered as valid and it is not “crossed out” / rewritten by other CSS, so it should work, I think .. very strange ..

Does anyone know what the problem is here?

I made a fiddle so you can see the problem first hand: http://jsfiddle.net/wH8kF/