How to Combine Cursor: Not-Allowed and Pointer-Events: None;

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.

  1. The arrow can only change the cursor if it has pointer-events that is not none, but then the input won't get the click.

  2. input can't have children so that is also not an option.

  3. 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



Leave a reply



Submit