Set all form fields inside DIV disabled using CSS class

Question

I have several div containers on my page with form fields inside. They all have same class value, and i want set form fields all to be inactive (disabled) using this class/CSS.

Is that possible?

Answer 1

There are ways to do it with CSS, however none of them are actually effective, there are simple ways for users to get around CSS only methods. However here is an example anyway using css:

Your HTML:

<div id="con">
    <input name="name" type="text" value="Text input" />
    <span id="overlay"></span>
</div>

Your CSS:

#con {
    width: 300px;
    height: 50px;
    position: relative;
}
#con input[type="text"] {
    position: relative;
    top: 15px;
    z-index: 1;
    width: 200px;
    display: block;
    margin: 0 auto;
}
#con #overlay {
    width: 300px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    background: rgba(155,0,0, .5);
}

Example fiddle

As already mentioned, jQuery would be a much more reliable solution to this particular problem.

Answer 2

This is not possible with just CSS.

Info: Disable html input element by applying custom css class