how to override unselectable="on" with css in IE10?

I am trying to override text selection IE 10, using css, for element with the attribute unselectable="on", but the following css rule doesnt seem to work:

-ms-user-select: text !important;

if an element has unselectable="on", IE10 ignore the css override even if it has !important.

though, if the user start the selection "outside" of the element with the unselectable="on", that element content can be selected, stangely, though that doesnt help when the parent element has no selectable content, in that case the content of the element with unselectable="on" is effectively unselectable.

here is a simple testcase (for IE10): http://jsfiddle.net/svysK/

<html><head>
<style> 
.maincontainer, .innercontainer {
  -ms-user-select: text !important;
}
<style></head><body>
<div class="maincontainer">some text<div class="innercontainer" unselectable="on">inner text</div></div>
</body></html>

click-drag on "inner text" : cursor change, but text is not selectable (thats my problem).
click-drag on "some text" : cursor change, text is selectable.
click-drag on "some text" and "inner text" : cursor change, all text are selectable.

any idea if there is a workaround to this behavior? (without using javascript to change the attribute value if possible)

thank you for your attention, best regards, Oliver

Solution

CSS and "!important" work on the styling of an element, and cannot override attribute values. Therefore, IE10 probably decides that since the attribute "unselectable" is there, the element should not be selectable, regardless of whatever style you put on it.

You'd need to remove the attribute, perhaps using jQuery.

$(".innercontainer").removeAttr("unselectable");