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?
Add a comment
|
2 Answers
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);
}
As already mentioned, jQuery would be a much more reliable solution to this particular problem.
Comments
This is not possible with just CSS.
Info: Disable html input element by applying custom css class
