<table>
<tr class="here"><td><input type="text" readonly=readonly></td></tr>
<tr class="here"><td><input type="text" readonly=readonly></td></tr>
<tr class="here"><td><input type="text" ></td></tr>
</table>
td {
padding: 15px;
margin: 10px;
}
.here {
background-color: red;
}
Is there a way to apply styling to elements with class .here only when the child input has the readonly attribute without modifying the HTML? See the updated example here: jsfiddle.net/dZYEM/2/
The desired result is shown here: http://jsfiddle.net/dZYEM/3/
This should be achieved using only CSS, without using any additional style attributes.