title: display:none doesn't work for option
body: <p>Demo <a href="http://jsfiddle.net/Wener/WC9yy/" rel="noreferrer">here</a></p>
  
  <p>HTML:</p>
  
  <pre><code>display:none &lt;b&gt;not works&lt;/b&gt;,the hidden can &lt;b&gt;not select&lt;/b&gt;.&lt;br&gt;
  &lt;select size="5"&gt;
      &lt;option value="A"&gt;A&lt;/option&gt;
      &lt;option value="B"&gt;B&lt;/option&gt;
      &lt;option value="C"&gt;C&lt;/option&gt;
      &lt;option value="D"&gt;D&lt;/option&gt;
      &lt;option value="E"&gt;E&lt;/option&gt;
      &lt;option value="F"&gt;F&lt;/option&gt;
      &lt;option value="G"&gt;G&lt;/option&gt;
      &lt;option value="H"&gt;H&lt;/option&gt;
      &lt;option value="I"&gt;I&lt;/option&gt;
  &lt;/select&gt;&lt;br&gt;
  
  display:none &lt;b&gt;works&lt;/b&gt;,the hidden &lt;b&gt;can select&lt;/b&gt;.&lt;br&gt;
  &lt;select&gt;
      &lt;option value="A"&gt;A&lt;/option&gt;
      &lt;option value="B"&gt;B&lt;/option&gt;
      &lt;option value="C"&gt;C&lt;/option&gt;
      &lt;option value="D"&gt;D&lt;/option&gt;
      &lt;option value="E"&gt;E&lt;/option&gt;
      &lt;option value="F"&gt;F&lt;/option&gt;
      &lt;option value="G"&gt;G&lt;/option&gt;
      &lt;option value="H"&gt;H&lt;/option&gt;
      &lt;option value="I"&gt;I&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>select{width:50px;}
  
  [value=C]{
      display: none;
  }
  /* will hold the position */ 
  [value=B]{
      visibility: hidden;
  }
  </code></pre>
  
  <p>The size attribute will affect the display and visibility, what happen to this ?</p>
  
  <p>How can I hide the option in select which has a <code>size</code> attribute ?</p>