Disable controls with a CSS-only glass panel
permalinkHere’s a neat CSS-only panel that you can use to disable controls within a given <div> element. It uses an absolutely-positioned <div> within the container of controls you’d like to disable. The glass panel is positioned using CSS to overlap the controls, and set partially transparent to give the controls a disabled look.
Note that this only works in standards mode, <!DOCTYPE html>, due to IE’s painfully outdated quirks mode. Additionally, your container of controls needs to be styled as overflow: hidden to work around the limitations of the height expression and position: relative so the parent can become a CSS positioning parent.
Click here to view the demo (works in standards-compliant browsers + IE).
<!DOCTYPE html>
<html><body>
<style>
.disablable {
position:relative;
overflow:hidden;
}
.disablable-disabled .glasspanel {
display:block;
position:absolute;
top:0px;
bottom:0px;
opacity:0.4;
filter:alpha(opacity=40);
background-color: green;
height:expression(parentElement.scrollHeight + 'px');
width:100%;
}
.disablable-enabled .glasspanel {
display: none;
}
</style>
<button onclick="document.getElementById('control').className='disablable disablable-disabled';">Disable</button>
<button onclick="document.getElementById('control').className='disablable disablable-enabled';">Enable</button>
<div id="control" style="border: 1px solid black;">
<div></div>
These are the controls to disable:
<br>
<button>Hi!</button>
<select><option>Option 1</option><option>Option 2</option></select>
</div>
<button>Won't be disabled</button>
</body></html>