title: Is there a way to prevent the pointer/cursor from interacting with elements behind a select element using CSS?
body: <p>Is there a way to prevent the pointer/cursor from interacting with elements behind a select element using CSS?  This seems to only happen in IE11.</p>
  
  <p>Here is a jsFiddle showing my issue: <a href="http://jsfiddle.net/6mzhgmvj/" rel="nofollow">http://jsfiddle.net/6mzhgmvj/</a>.</p>
  
  <p>The accompanying code is as follows:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;select autofocus&gt;
  &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
  &lt;option value="saab"&gt;Saab&lt;/option&gt;
  &lt;option value="opel"&gt;Opel&lt;/option&gt;
  &lt;option value="audi"&gt;Audi&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; The autofocus attribute of the select tag is not supported in Internet Explorer 9 and earlier versions, or in Firefox.&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Repro Steps:</p>
  
  <ol>
  <li>Expand dropdown menu.</li>
  <li>Hover over options.</li>
  <li>When hovering over options 3 and 4, the cursor rapidly changes between 'default' and 'text' because there is a paragraph element behind it when expanded.</li>
  </ol>
  
  <p>Any help on this would be great.</p>