dropdown with checkbox hack

Dropdown menu with checkbox hack

HTML

<p>Show what's currently selected, using javascript:</p>

<input type="text" value="" id="trace"/>

<p>Dropdown with custom styling, using the checkbox hack, along the lines of <a href="http://stackoverflow.com/a/9599581/3093080">this</a>, using the variant suggested by "namehere" in the comments.</p>

<form class="my-image-dropdown">
		<label>
			<input type="radio" name="line-style" value="1"  />
			<div class="dropdown-label">
				<span class="color-swatch vmiddle">
					<span style="background-color:red;">&nbsp;</span><span style="background-color:green;">&nbsp;</span><span style="background-color:blue;">&nbsp;</span>	
				</span>
				<span class="collapsedonly vmiddle">&#9662;</span>
				<span class="checkedonly vmiddle">&#x2713;</span>
			</div>
		</label>
		<label>
			<input type="radio" name="line-style" value="2" checked="checked"/>
			<div class="dropdown-label">
				<span class="color-swatch vmiddle">
					<span style="background-color:purple;">&nbsp;</span><span style="background-color:green;">&nbsp;</span><span style="background-color:pink;">&nbsp;</span>	
				</span>
				<span class="collapsedonly vmiddle">&#9662;</span>
				<span class="checkedonly vmiddle">&#x2713;</span>
			</div>
		</label>
		<label>
			<input type="radio" name="line-style" value="3" />
			<div class="dropdown-label">
				<span class="color-swatch vmiddle">
					<span style="background-color:grey;">&nbsp;</span><span style="background-color:darkblue;">&nbsp;</span><span style="background-color:black;">&nbsp;</span>	
				</span>
				<span class="collapsedonly vmiddle">&#9662;</span>
				<span class="checkedonly vmiddle">&#x2713;</span>
			</div>
		</label>
		<label>
			<input type="radio" name="line-style" value="4" />
			<div class="dropdown-label">
				<span class="color-swatch vmiddle">
					<span style="background-color:yellow;">&nbsp;</span><span style="background-color:orange;">&nbsp;</span><span style="background-color:green;">&nbsp;</span>	
				</span>
				<span...

CSS

/* Hide the radio buttons */
.my-image-dropdown input {
	/*height: 0; width: 0; opacity:0;*/ /* This was in original code, seems unnecessary */
	display:none; /* Using display:none seems easier than setting height, width, opacity */
}


/* Style the container for both minimized and maximised state*/
.my-image-dropdown {
	width: auto; 
	height: auto; 
	background: #DDDDDD;
  border: 1px solid #999999;
	display: table;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 5px;
}


/* Collapse the dropdown when no hover, by hiding the contents of the label elements */
.my-image-dropdown label input ~ * {
	display:none;  
}


/* Expand the dropdown on hover (mouse) or tap (touch-screen) */
.my-image-dropdown:hover {
	height: auto;  /* Use fixed height or else auto to fit all color swatches */
	overflow-y: scroll;  /* If fixed height, use native scrolling */
}
.my-image-dropdown:hover label input ~ * {
	/* Use display:inline-block for tiling           */                             
	/*   or display:block;       for full-width vertical stacking */
	/*   or display:table;       for vertical stacking and fit to width of contents */
	display: table;  /* Vertical stacking and fit to width of contents */
}

/* Add some space between rows when expanded */
/* This uses the :not() selector which has pretty solid browser support */
/* http://caniuse.com/#feat=css-sel3 */
.my-image-dropdown:hover label:not(:first-child) input ~ * {
	margin-top: 10px;
}

/* Display the checked option even when the dropdown is collapsed */
.my-image-dropdown label input:checked ~ * {
	display:table;
	/* Optional: apply styling to the chosen option */
}

/* Apply effect when hovering over a particular label */
.my-image-dropdown label:hover input ~ * {
	opacity:0.5;
}

/* Show the down arrow only when collapsed and only for the checked option */
.my-image-dropdown label .collapsedonly {
	display:none;
}
.my-image-dropdown label input:checked ~ .dropdown-label...

JavaScript

/* Update the trace showing currently selected option */
$( document ).ready(function() {
	var i = setInterval(function(){$("#trace").val($("input:checked").val());},100);
		});
    
/* Fix the sticky hover bug on iOS - see http://www.dynamicdrive.com/forums/entry.php?335-iOS-Sticky-Hover-Fix-Unhovering-dropdown-CSS-menus */
(function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document);