IE strange behavior on textarea and select?

Question

I have strange IE behavior on cursor property css?

Here is the code, this is just simple inline style to show what is the problem?

<div style="width:100%;">
<select>
<option value="">Select</option>
<option>John</option>
<option>John</option>
<option>John</option>
<option>John</option>
<option>John</option>
<option>John</option>
</select>
</div>
<textarea style="cursor:not-allowed;"></textarea>

All i working OK in Firefox and Google Chrome, only in IE is the problem, when option get over textarea cursor change style to not allowed? Please take a look at fiddle here but only in IE?

Working fiddle

http://jsfiddle.net/f6paL8sc/

Answer 1

It seems this is a IE related Bug. I've made a solution and it works *(*IE required a .cur file to work ); but lets check the DEMO first.

In this example I used disabled attribute to disabled the textarea because you are using cursor:not-allowed which gives a impresson of that field is disabled.

Download this PNG image and convert it into (.cur) using this Online tool

Here is the CSS used.

textarea[disabled]
{
 display:block;
  cursor:url('http://www.dolliehost.com/dolliecrave/cursors/cursors-cute/cute25.gif'), url('cute25.cur'), wait;
  background:gold;
}

In HTML code I disabled the textarea which makes more sense here.

<textarea disabled>This TextArea is disabled</textarea>

NOTE: I haven't got chance to test on IE but it must work.