First time asking question (so here we go)

Looking to “disable” input elements using only CSS to stop users from entering data on screen when their security level is insufficient. This is an old (and well answered) question involving using pointer-events, user-select, etc. such as (text. But these solutions seem to stop short since a user can tab to an element.

But I may have stumbled upon a unique solution. This might seem “evil” but very useful and appropriate for the task. Here is what is implemented:

    & .readonly :is(input, textarea, .custom-input) {
        &:is(:focus,:active) {
            pointer-events: none;
            user-select: none;
            background-color: red;
            visibility: hidden;
        }
    }

The affect of this CSS is that when an element has focus, it’s visibility is set to hidden. This immediately causes the element to lose focus since a hidden element cannot have focus. Thus the element never gets focus. This works with mouse clicks and more importantly works when tabbing to the element.

I have spent some time looking to see if anyone has already posed this solution to no avail.

So the question is the following: Does using the visibility attribute in conjunction with the focus/active pseudo-elements make sense. Or is that a really bad idea?