how to override unselectable=“on” with css in IE10?


Tags: html,css,internet-explorer-10

Problem :

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");

    CSS Howto..

    How to center this on screen

    How is percentage calculated when using it for margin and padding?

    How to refactor an existing project to use Compass?

    How to make a list of “background-image” CSS using WebDriver with Java

    How to make a foreground image using CSS?

    css. How to write (code) css for different window widths?

    How to vertically align html radio buttons with CSS-only in this code?

    How to make header/body/footer 'popup' div with variable height body?

    How to center image while also aligning text to the right of image?

    Showing an hidden element with an opacity-animation

    CSS Media Queries: How to make the right column display above the left on small screens?

    How do I vertically center align a position:relative element

    How can I change input type of Yii CJuiAutoComplete?

    how to Styling a “choose file” button using css Only

    How to set a:visited and a:hover programmatically in ASP.NET

    How to create Rectangle With Gradient Color Stripes Border via CSS?

    how to make html email look exactly the same as previewed just in browser?

    How to use icon fonts

    How to dynamically change width of Div1 inside a scrollable Div2 to Div2's width

    How to stop CSS Code Display:none for specific id or class?

    How to mix url string & attribute value in CSS content property? [duplicate]

    How to make slanted CSS arrow pointing to a div

    How to ease the whole css animation

    How to ignore comments in sass partial files?

    How to make button look like a link?

    How to have menu items streched in full width menu with css for any screen automatically

    How can i place a child div on a fixed position of a parent div that when i change place of parent then child should move automatically?

    How to load only html from web pages in selenium

    How to change css of element using jquery

    How to style div's so that they don't stack right on top of each other?