CODEWITHSUNDEEP
htmlcsspointer-events
Nasrin
Nasrin

Reputation: 177

pointer-events: none is not working on contenteditable element

I have a parent div element in which the pointer-events is none. inside this div there's a span in which its contenteditable attribute is true, but I still can edit the span element content on Chrome, while the pointer-events for parent div is none.

But in Firefox, everything works correctly, and I cannot edit the span content.

You can find the result here

and here's my code:

<style>
.item-disabled{
    opacity: 0.3;
    pointer-events: none;
}
.media, .media-body, .media-heading{
    padding: 15px;
}
.list-unstyled{
    padding-left: 0;
    list-style: none;
    margin-left: -5px;
}
</style>

<div class="item-disabled">
    <li class="media">
        <div class="media-body">
            <div class="media-heading">
                <ul class="list-unstyled">
                    <li><span  contenteditable="true">Span Conetnt</span></li>
                </ul>
            </div>
       </div>
    </li>
</div>

Upvotes: 0

Views: 693

Answers (1)

Lai Kai Yong
Lai Kai Yong

Reputation: 23

I think that currently chrome is unstable for the pointer-events element while Firefox is preferably stable.

As you can see, in the MDN documentation, Firefox is more stable and more compatible than chrome for pointer-events https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

I would recommend to display it on Edge as it is more compatible or even use other element to replace the feature whenever possible until Chrome and Firefox is more compatible in the future

Upvotes: 2

Related Questions