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'
Related
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!
I used an html table to make some cellular automata animations and would like to have those animations as the background of a webpage. Is it possible to make a table the background of the page?
Yes, it's definitely possible. What you'd want to do is fill the page with the table, by setting its position to absolute, forcing it into the top left corner, and width/height values to 100%:
#your-table {
position: absolute;
/* Force table into the top right corner */
top: 0px;
left: 0px;
/* Expand table out into the rest of the window */
width: 100%;
height: 100%;
}
If you set pointer-events to "none," most browsers will prevent the cursor from changing when the user mouses over the content. There is also user-select, that can be used to disable text selection highlighting. Thus I suggest adding the following CSS rules to your background table to make it behave more like a background:
/* Disable pointer events */
pointer-events: none;
/* Disable text selection highlighting */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Opera and Firefox */
Best of luck on your project!
While you can certainly stack elements over your table, you can not use a table in the same way as you would a background image. It would be helpful if you provided an example of what you have now and what you are trying to achieve.
I have some nested spans.
<span>
<span>Title</span>
<span>Author</span>
<span>Year</span>
</span>
When the user tries to select them, everything will be selected (with the blue background behind the selected text). However, I want only one span to be selectable, so that the user cannot go wrong and can only select, for example, the author field.
I have tried making the other fields not selectable by doing this:
.unselectable {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
/* No support for these yet, use at own risk */
-o-user-select: none;
user-select: none;
}
and then in my html:
<span>
<span class="unselectable">Title</span>
<span>Author</span>
<span class="unselectable">Year</span>
</span>
But it does not work, I can still select everything. I am using React & electron, if this should make a difference.
I've got an input element inside a label element (don't want to use id):
<label class="inline-block-class">
<input type="radio/checkbox" class="hidden-class" />
<span><img src="mimic-input-element.png" /> some text</span>
</label>
It all works well, but when I'm clicking the label twice in a row, trying toggling the input on and off, it works only for the first click. The second one is just 'selecting' the elements on screen.
How can I prevent this behaviour? I want to give the label a native feel, like clicking on the real thing.
Here's a fiddle that demonstrates the issue: http://jsfiddle.net/soLuwwy3/
few lines of css will do this for you:
label span {
background: yellow;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
your jsfiddle edited:
http://jsfiddle.net/soLuwwy3/5/
To make your span text not selectable use user-select: none.
more info user-select
label span {
background: yellow;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
DEMO
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;
}