I require one HTML element (Label) on my page to be unselectable for IE ... currently I have tried
Unselectable=on
onselectreturn=false;
none of which is helping me out.
For Firefox and Chrome i have set the following CSS property which are working absolutely fine ... but the problem as always with the IE.
CSS properties you have set:
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
is there any alternative or IE-hack?
An answer on Stack Overflow has helped me out but not for IE.
<label unselectable="on"> should work for IE in the HTML. If applying it from javascript you MUST use setAttribute: labelEl.setAttribute("unselectable","on"). labelEl.unselectable = "on" does not work (tested in IE9).
Note that the "unselectable" attribute only affects text directly inside the element, not within its children - you need to set unselectable on them also, if that's the effect you want.
In IE8 there are two ways to make an element unselectable:
1.) myElement.unselectable = "on"; // Does not work on body elements
2.) myElement.onselectstart = function (){ return false; }
Once an element is unselectable, users cannot select from within that element.
However, they are still able to select either the text or the box of the element
by dragging into it from within another element which is not unselectable.
I have tried to work around this by cancelling various events on myElement (ondragenter, oncontrolselect, onmouseenter, onselectionchange...), it didn't work.
All this applies only to IE8
Set unselectable to off and it should work.
<label unselectable="off">Something</label>
http://jsfiddle.net/sWguE/1/
This also works for me
<label onselect="return false">Something</label>
http://jsfiddle.net/sWguE/3/
Related
For a task, the product owner wants to disable most HTML elements from being highlighted via Ctrl-A. The way I'm doing this is to set
body {
-{$prefix}-user-select: none;
user-select: none;
}
div.element-to-select {
-{$prefix}-user-select: all;
user-select: all;
}
I've also made up a codepen at http://codepen.io/daredevil82/pen/zxPzbJ to demonstrate. In this example, when mouse focus is on the white area, a Ctrl-A press will have the Select text highlighted but the No Select text will remain un-highlighted in Firefox 35+ and Chrome, but both elements will not be selected in IE 11.
Is there a way around this behavior for IE?
The Working Draft User Interface for CSS3 defined user-select like this:
This property is not inherited, but it does affect children in the
same way that display: none does, it limits it. That is if an element
is user-select: none, it doesn't matter what the user-select value
is of its children, the element's contents or it's childrens contents
cannot be selected.
Firefox implemented -moz-user-select: none according to that draft; and also implemented -moz-user-select: -moz-none, which allowed selection to be re-enabled on sub-elements using -moz-user-select: text.
However, starting with Firefox 21, -moz-user-select: none behaves like -moz-user-select: -moz-none, due to Bug 816298:
Our -moz-user-select: none behaves as proposed in the css3-userint TR
but WebKit, IE, and Opera's -XXX-user-select: none behave like
-moz-user-select: -moz-none.
Not sure if the bug is wrong and IE also followed the proposed spec, or if IE changed the behavior later. But now IE seems to be the only major browser which follows it.
However, you can't rely on that draft. The User interface for CSS3 module has been superseded by CSS Basic User Interface Module Level 3 (CSS3 UI), which doesn't include user-select.
Therefore, since user-select is no longer standard, implementators won't probably change their implementations in order to have a common behavior among different browsers.
I have styled my select boxes, but i can still see the arrow in my select box in firefox, i have set css so:
background:transparent;
content:'';
apperiance:none;
Thats work on Chrome, but on Firefox i still see default arrow, is possible to delete it also on Firefox?
This should remove the arrow in selects in Chrome, Firefox, Safari, and IE10.
.poa-select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
text-indent: .01px;
text-overflow: "";
}
.poa-select::-ms-expand {
display: none;
}
Ideas taken from here and here.
Unfortunately there isn't yet a cross-browser compatible route of styling form elements with CSS: it's not usually left to the designer to have control over their appearance/behaviour so form elements are notoriously difficult to style. Many browsers specifically do not allow you to style them at all!
If you need to get a consistent look across all browsers, the only route is to use JavaScript to replace the form element in-view with stylised HTML elements.
Here's an article that lists a few of the options available for you: http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
The trick that works for me is to make select width more than 100% and apply overflow:hidden
select {
overflow:hidden;
width: 120%;
}
The answer from here : How to remove the arrow from a tag in Firefox
Use the pointer-events property.
The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it. [see this post]
Here is a working FIDDLE using this method.
Also, in this SO answer I discussed this and another method in greater detail.
If I have a div with the style overflow: hidden; I found that there are times when keyboard actions can cause the div to scroll anyway. And since there are no scrollbars, there is really no way to make the div go back to its original state. Is anything I should do in addition to specifying the style to prevent this?
For example when you select the L with the mouse (in the fiddle) and after that you press the down arrow key while holding down shift (i.e. expanding the selection).
http://jsfiddle.net/PeeHaa/H34mM/
Or another scenario is when there is a textarea in the div: http://jsfiddle.net/h6Bhb/1/
A simple solution would be to disable text-select in the relevant element. Therefor preventing the possibility to use the arrow keys to select more..
To prevent tekst select you need to event.preventDefault() in the mousedown event with JS.
For your fiddle that could look like this in modern standards compliant browsers:
// give the div an id
document.getElementById('div').addEventListener('mousedown', function(e) {
e.preventDefault();
}, false);
Edit
Or as #JimThomas pointed out in the comments you can disable text select using CSS, ofcourse this doesn't enjoy as much support as the JS solution.
How to disable text selection highlighting using CSS?
I couldn't think of a more graceful or more complete (this doesn't solve problems you might have with inputs) solution, and I'm not sure if there even is one...
Add this to your div CSS:
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none; /* IE10+ */
user-select: none;
Does not work in < IE10 or Textarea, but I don't believe anything will prevent the textarea scenario unless you disable the textarea itself to prevent selection.
... or go with JS solution.
In my .net project ,these are so many codes like this
< asp:TextBox ID="txtDeparment" runat="server" contentEditable="false">< /asp:TextBox>
it works well In IE,but in Chrome, it doesn't work. but you cann't simply replace it by ReadOnly.
How can I resolve this problem in minimum changes?
In order to make a text box un-editable you should use the following CSS attributes:
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
These CSS attributes don't allow selecting the element, which in the case of an input field, also denies editing it.
I have a website where I want to disable users from selecting content EXCEPT for input areas. I currently have some CSS to disable user-select:
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
However, this does NOT cover Internet Explorer; thus, I need to implement some JavaScript:
<body onselectstart="return false;">
Through CSS and JavaScript, I can make all content unselectable across all popular browsers. BUT, this code also makes areas unselectable, which is a major case of poor usability. I use CSS to make input areas selectable:
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
.. and as you might have expected, this does not cover Internet Explorer, since I used JavaScript to disable all content from being selectable.
What can I do to make all content unselectable except for input areas?
Since the event is bubbling up to the body and not originating there, I think you can check the node name for the actual target node, and avoid returning false for events occurring on certain nodes:
<body onselectstart="if ((event.target || event.srcElement).nodeName !== 'INPUT') return false;">
Try this one: oncontextmenu="return false;"
Put that in your body tag, then use something like:
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
in a javascript function for the input items you want selectable. That should stop the propagation of the event that would trigger the body tag.
You can add the proprietary IE attribute unselectable="on" to any element that you want to make unselectable in IE:
<p unselectable="on">I don't want IE users to easily select this text
for some reason.</p>
See Making things unselectable in IE for a more detailed explanation.
If doing this from javascript, be sure to use el.setAttribute("unselectable","on"). Just using el.unselectable="on" will not work.