How to combine cursor: not-allowed and pointer-events: none;
you can't do this because pointer-events: none;
disable all mouse functions, but you can do a trick and wrap your button with a div
then use cursor: not-allowed;
on this.
.pointer-events-none {
pointer-events: none;
}
.wrapper {
cursor: not-allowed;
}
<div class="wrapper">
<button class="pointer-events-none">Some Text</button>
</div>
Add CSS cursor property when using pointer-events: none
Using pointer-events: none
will disable all mouse interactions with that element. If you wanted to change the cursor
property, you would have to apply the changes to the parent element. You could wrap the link with an element and add the cursor
property to it.
Example Here
HTML
<span class="wrapper">
<a href="#">Some Link</a>
</span>
CSS
.wrapper {
position: relative;
cursor: text; /* This is used */
}
.wrapper a {
pointer-events: none;
}
There are a few browser inconsistencies, though. To make this work in IE11, it seems like you need a pseudo element. The pseudo element also allows you to select the text in FF. Oddly enough, you can select the text in Chrome without it.
Updated Example
.wrapper:after {
content: '';
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
}
How to make cursor pointer while pointer-events is none
As far as I know, this is not possible without JavaScript.
The arrow can only change the
cursor
if it haspointer-events
that is notnone
, but then theinput
won't get the click.input
can't have children so that is also not an option.All of the search results indicate that the
datalist
can't be opened (reliably?) with JavaScript or html only solutions.
The only thing that comes to my mind is to change the cursor programmatically:
function isEventInElement(event, element) {
var rect = element.getBoundingClientRect();
var x = event.clientX;
if (x < rect.left || x >= rect.right) return false;
var y = event.clientY;
if (y < rect.top || y >= rect.bottom) return false;
return true;
}
const inputElement = document.querySelector('[name="inp"]')
const inputElementArrow = document.querySelector('.wrapper')
inputElement.addEventListener('mousemove', (evt) => {
if (isEventInElement(evt, inputElementArrow)) {
inputElement.style.cursor = 'pointer'
} else {
inputElement.style.cursor = null;
}
})
input::-webkit-calendar-picker-indicator {
display: none !important;
}
.wrapper {
position: relative;
display: inline;
left: -25px;
pointer-events: none;
}
.wrapper svg {}
<input type="text" list="mylist" name="inp" />
<div class="wrapper" onclick="getElementsByName('inp')[0].click();">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" d="M16.293 9.293L12 13.586L7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z" />
</svg>
</div>
<datalist id="mylist">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</datalist>
disabling mouse events react
Ok you need to wrapper that object
class Hello extends React.Component {
render() {
return <div style={{cursor: 'none'}}>
<button style={{ pointerEvents: 'none'}}>
Hello {this.props.name}
</button>
</div>;
}
}
ReactDOM.render(
<Hello name="World"/>,
document.body
);
By base of CSS can't combine pointerEvents: 'none',cursor: 'none'
directly.
You need to wrapper that item and separate style like here
DEMO: https://jsfiddle.net/limitbrk/g9w7es5p/
- CSS cant combine How to combine cursor: not-allowed and pointer-events: none;
- disable pointer-events Can't disable pointer-events in React app
Difference between pointer-events and cursor
The pointer-events
property gives control over how an element can respond to touch or click events, while the cursor
property just controls what the cursor should look like in that event.
i.e. cursor: pointer
will show a pointer finger when you hover over the element... cursor: disabled
will show a cross sign showing the element might be disabled.
pointer-events: none
on the other hand, will make the element completely unresponsive to a hover or click.
CSS-tricks has a write up here: https://css-tricks.com/almanac/properties/p/pointer-events/
How to prevent the click event using CSS?
You can try the css class:
.noClick {
pointer-events: none;
}
Related Topics
Use HTML Tag Names, Classes or Ids in CSS
Elastic Easing in CSS3, Best Approach
How to Add a Margin to a CSS Webkit Scrollbar
Css: Fixed with Horizontal Menu, with Variable Width Tabs, Using Ul
Css-Less Class Extend Class with Pseudo Class
Override Jquery UI Datepicker Div Visible Strangely on First Page Load
How to Make IE8 Honour Opacity on an ':Before' Pseudo Element
Why Does Internet Explorer Need the "Haslayout" Flag
Use Fontawesome Icon in Svg Without External Files
How to Make a Transparent Border with CSS
Center Output (Plots) in the Notebook
Ckeditor - Prevent Adding Image Dimensions as a CSS Style
How to Alias Class Name in CSS or SASS
How to Get IE8 to Accept a CSS :Before Tag
How to Apply My CSS Stylesheet to an Rss Feed