Prevent highlighter cursor in CSS?
Simply use the cursor property on hover.
a:hover {
cursor: pointer;
}
You can see the available cursor values here.
Example http://jsfiddle.net/8nyEE/
<a class="hand">link with hand cursor</a>
<br/><br/>
<a class="nohand">link with default cursor</a>
a {color: blue;}
.hand:hover {
cursor: pointer;
}
.nohand:hover {
cursor: default;
}
Disable cursor clicks without blocking highlighting
Ok I edited my previous answer:
If I understand correctly you want to keep highlight (select text) but do not let user to move cursor on the textarea. If that is the case, then you can do something like this. First let's remove
pointer-events:none;
Then add readonly
on the textarea
example:
<textarea readonly id="textarea" class="textarea" data-gramm_editor="false" data-gramm="false">
</textarea>
Note: Generally avoid using pointer-events: none
it will disable highlight and select and also cursor style.
Now in your case (having active select, having cursor active, do not let user move cursor in textarea), you can do something similar to this, you can use a div
instead of textarea
and edit inneHTML of that div. As you can see, I created a cursor which is html element and it is similar to a real cursor. By doing this, you have more control on your keyboard, I hope it can help.
Generally it is not possible to achieve all you want with textarea
only.
const editable = document.getElementById('editableC');
addCursor()
const buttons = document.querySelectorAll('button');
buttons.forEach(el =>
el.addEventListener('click', event => {
removeCursor();
const letter = event.target.innerHTML;
if (letter === 'clear') {
editable.innerHTML = editable.innerHTML.slice(0, -1);
}else {
editable.innerHTML += letter;
}
addCursor()
})
);
function addCursor(){
let span = document.createElement('span');
span.classList.add('blinking-cursor');
let text = document.createTextNode('|');
span.appendChild(text);
editable.appendChild(span);
}
function removeCursor(){
const span = editable.querySelector('span')
span.remove()
}
.editableC {
width: 300px;
height: 100px;
border: 1px solid #ccc;
padding: 5px;
word-break: break-all;
}
.blinking-cursor {
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
font-size: 18px;
margin-left: 2px;
color:red;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
@keyframes "blink" {
from,
to {
color: transparent;
}
50% {
color: red;
}
}
@-moz-keyframes blink {
from,
to {
color: transparent;
}
50% {
color: red;
}
}
@-webkit-keyframes "blink" {
from,
to {
color: transparent;
}
50% {
color: red;
}
}
@-ms-keyframes "blink" {
from,
to {
color: transparent;
}
50% {
color: red;
}
}
@-o-keyframes "blink" {
from,
to {
color: transparent;
}
50% {
color: red;
}
}
<div id="editableC" class="editableC"></div>
<div style="margin-top:10px">
<button>A</button>
<button>B</button>
<button>clear</button>
</div>
Anyway to prevent the Blue highlighting of elements in Chrome when clicking quickly?
You can use pure CSS to accomplish this. Here's a rundown for multi-browser support, chrome being covered by the first line and the final :focus
bit. Details below.
.noSelect {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.noSelect:focus {
outline: none !important;
}
Simply add the class="noSelect"
attribute to the element you wish to apply this class to. I would highly recommend giving this CSS solution a try. Some have suggested using JavaScript, but I believe this is the cleanest solution.
For Android/Safari mobile/Edge
-webkit-tap-highlight-color: transparent;
is the additional rule you may be looking for. Affects Chrome desktop (esp. with touchscreen) and mobile devices. Here's a warning about using this non-standard property, as well as some accessibility concerns with suggestions. Best practice is to replace the highlight with your own styling.
UPDATE: Later versions of Chrome...
A commenter on this answer pointed out :focus { outline: none !important;}
is needed for newer versions of Chrome. Answer adapted to include this, as well! Ah, ever-changing standards.
How can I prevent text/element selection with cursor drag
dragging and selecting both initialize on a mouse down event and update on subsequent mouse moves. When you handle the events to begin dragging, or to follow the mouse, cancel the event's bubbling and override the default browser return:
something like this in your begin dragging mousedown and move handlers-
e=e || window.event;
pauseEvent(e);
function pauseEvent(e){
if(e.stopPropagation) e.stopPropagation();
if(e.preventDefault) e.preventDefault();
e.cancelBubble=true;
e.returnValue=false;
return false;
}
how to avoid highlighting all text over absolute positioned cousin div
You can use
pointer-events: none;
on the #cover
element
https://jsfiddle.net/c741LoLv/2/
This removes normal pointer functionality from the element - highlight, hover, focus etc.
The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.
https://developer.mozilla.org/en/docs/Web/CSS/pointer-events
https://css-tricks.com/almanac/properties/p/pointer-events/
CSS - How to stop input being highlighted when tapped on mobile
I couldn't see any shadow flashes in the output of your code.But this may help i used this to remove the blue tap color that appears while clicking on button.
Just add this
*{
-webkit-tap-highlight-color: transparent;
}
Related Topics
How to Avoid Line Breaks After ":Before" in CSS
Angular 2: How to Correctly Automatically Import Normalize.CSS
How to Apply Drop-Shadow Filter via CSS to Svg Specific Element/Path
CSS3 Transform Property Working Differently in Internet Explorer
Centering 2 Divs Inside Another Vertically
Jquery UI Styled Text Input Box
Fix Div to Bottom Without Using CSS Position
Two Divs on The Same Row and Center Align Both of Them
Reset Style Sheet with Twitter Bootstrap
Rotating a Svg with CSS (Animation)
Multi Line Dotted or Dashed Text-Underline
Flex: Justify-Content: Space-Around But Full Size on Both Ends
Explain Regex That Finds CSS Comments
Hiding Text Using "Text-Indent"
CSS3 Question: How to Have No Box Shadow on The Top of a Div
Using an Image File Vs Data Uri in The CSS
Should I Use The Svg Gradients Generated by Colorzilla for Ie9