I am trying to add to an HTML email an element in this case an anchor where the content of this element "Hello" can be selected on click/on touch by the recipient.
<div>
<a>Hello</a>
<div>
I have tried adding this style inlined:
-webkit-touch-callout: default;
-webkit-user-select: all;
-khtml-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
but this inline style is ignored (stripped from the html when opening the email in gmail web app for example.
This is an advanced feature of CSS (CSS3) and as such most email clients do not support it. They barely support the basics!
Related
I am using revealjs and want some words to be automatically selected/highlighted on my slides.
So I defined this class:
.force-select {
-webkit-user-select: all; /* Chrome 49+ */
-moz-user-select: all; /* Firefox 43+ */
-ms-user-select: all; /* No support yet */
user-select: all; /* Likely future */
}
Then using it like <span class="force-select"> word </span>
But unless I click on the word it is not getting auto-selected.
Any ideas how auto-select that?
user-select: all; property is used to 'Text selection' is made with one
click instead of a double-click and user-select: has no value for auto
selection or highlighted 'word'
I am trying to make some text readonly using in-line CSS. Both these methods work fine when testing using a standard html page.
Firefox syntax:
<div style="-moz-user-select: none;">Some text</div>
Chrome Syntax:
<div style="-webkit-user-select: none;">Some text</div>
However, I am trying to use this syntax in a text editor used within a CMS product. It works fine for firefox but not Chrome. I have also tried using the most basic approach which also does not work:
<div style="user-select: none;">Some text</div>
My question is, is there any other way of using in-line CSS (or HTML) to disable a block of text. Because we are using a free text editor we cant use any HTML input types.
One could combine all three inline css as following:
<div style="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">Some text</div>
This way it should work for all browsers you've mentioned.
One could wrap this css into one class which is suggested in the linked post
As explanation which is quoted from How to disable text selection highlighting using CSS?:
-webkit-touch-callout: none; /* iOS Safari /
-webkit-user-select: none; / Chrome/Safari/Opera /
-khtml-user-select: none; / Konqueror /
-moz-user-select: none; / Firefox /
-ms-user-select: none; / Internet Explorer/Edge /
user-select: none; / Non-prefixed version, currently
not supported by any browser */
One could also use some javascript properties to prevent selection:
<div style="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;" unselectable="on" onselectstart="return false;" onmousedown="return false;">Some text</div>
I'm currently using:
*{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Go to http://jsfiddle.net/KyF5x/ and click below the list, see that this highlights the text... which can't be un-highlighted. Reload the page, now try ctrl+a, see that this will also highlight the text.
The above doesn't occur in Chrome, Safari or IE 10.
Disclaimer: I'm using Firefox 18
As a temporary answer, the fix is the apply the CSS to the individual 'unselectable' elements. However i'd love to see someone come up with a document-wide fix.
li{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
See: http://jsfiddle.net/KyF5x/1/
A use case for having document-wide unselectable text is more obvious in the domain of web apps, rather than typical websites.
As a complement to Jack's answer - even in 2018, firefox does not support user-select, but does support moz-user-select. I chose a cut down version of what the fiddle in the accepted answer does:
/* stop the user selecting page structure with the mouse */
html, body, div, a, i, button, select, option, optgroup, hr, br {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
This is for a web app where we don't use any other elements, all page structures are divs, even titles etc, and we didn't want to disallow selection in input or textarea.
This was the only place in our entire web 500k lines of code app where we've had to use -moz- !!
I'm pretty new to Phonegap. I have a problem where the default css used in a clean Phonegap project won't allow input into text fields. I narrowed it down to one line of CSS:
* {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
}
The problem line is:
-webkit-user-select: none;
This can be found in www/index.css.
Seems like completely disabling the input field isn't the desired effect.
I've also posted this problem 2 times before but it was closed, not sure why... My issue was closed due to not being a common problem. Well, all I can say about that is, I guess some users at stackoverflow don't think CSS 3, Phonegap, HTML 5, and -webkit-user-select: is a common situation. I'd beg to differ.
However I can see this issue also posted here, also causing problems in Safari: User select:none causes input field to be inaccessible on Safari Although slightly different.
My current solution is this:
-webkit-user-select: text; /* change 'none' to 'text' */
Just still curious as to what is the most elegant solution to enable the text input, but still maintain some of this copy and past functionality that Phonegap is trying to achieve. Thanks!
Try adding this to your css:
input {
-webkit-user-select: auto !important;
}
This will override the text selection disabling that you have set on every single element (via the * selector) for input fields.
Just add rules to css in this way:
*:not(input,textarea) {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
user-select can cause issues in elements with contenteditable="true" so better to add that too
[contenteditable="true"] , input, textarea {
-webkit-user-select: auto !important;
-khtml-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
-o-user-select: auto !important;
user-select: auto !important;
}
http://jsfiddle.net/QKJfW/
I want the cursor to remain the cursor:move; cursor even when clicking and dragging on the page. As you can see now you get an i-bar like you are trying to select text.
In my real app it is actually a custom cursor.
Is that a possibility?
Put these styles on the thing you want to be non selectable:
http://jsfiddle.net/QKJfW/1/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
That should take care of your issue.
See: How to disable text selection highlighting using CSS?