Composite disable

by larchy

HTML

<div id=test class=stdInput>
    <label class=stdInputLabel for=selecterthingy>A label for this input</label>
    <label class=selectWrapper><select id=selecterthingy><option selected disabled>Placeholder</option><option value=1>Option 1</option><option value=2>Option 2</option></select></label>
</div>
</br>
<button onclick="document.getElementById('test').className += ' disabled'; ">Disable</button>
<button onclick="document.getElementById('test').className = document.getElementById('test').className.replace(/\bdisabled\b/,'');">Enable</button>

CSS

.disabled { 
    position : relative; 
    color: grey;
}
.disabled:after {
    content:' ';
    width: 100%;
    height: 100%;
    left:0;
    top: 0;
    position:absolute;
}

/* styling for example */
.stdInputLabel {
    display: block;
}

/* Fancy dropdown for fun */
select, textArea, input:not([type=button]):not([type=range]):not([type=file]):not([type=radio]):not([type=checkbox]) { 
		width: 15em;
		-webkit-border-radius:4px;
		-moz-border-radius:4px;
		border-radius:4px;
		height: 30px;
		font-style: italic;
		border: 1px solid lightgrey;
		-moz-box-shadow: inset 0px 3px 3px rgba(0,0,0,0.2);
		-webkit-box-shadow: inset 0px 3px 3px rgba(0,0,0,0.2);
		box-shadow: inset 0px 3px 3px rgba(0,0,0,0.2);
	}
	select {
		padding:3px;
		margin: 0;
		-webkit-border-radius:4px;
		-moz-border-radius:4px;
		border-radius:4px;
		-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
		-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
		box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
		background: #f8f8f8;
		color:#888;
		
		border:none;
		outline:none;
		display: inline-block;
		-webkit-appearance:none;
		-moz-appearance:none;
		appearance:none;
		cursor:pointer;
	}
	@media screen and (-webkit-min-device-pixel-ratio:0) {select {padding-right:18px}}

	label.selectWrapper {position:relative}
	label.selectWrapper:after {
		content:'<>';
		font:11px "Consolas", monospace;
		color:#aaa;
		-webkit-transform:rotate(90deg);
		-moz-transform:rotate(90deg);
		-ms-transform:rotate(90deg);
		transform:rotate(90deg);
		right:8px; top:2px;
		padding:0 0 2px;
		border-bottom:1px solid #ddd;
		position:absolute;
		pointer-events:none;
	}
	label.selectWrapper:before {
		content:'';
		right:6px; top:0px;
		width:20px; height:20px;
		background:#f8f8f8;
		position:absolute;
		pointer-events:none;
		display:block;
	}