JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<!DOCTYPE html>
<html>
    <link type="text/css" rel="stylesheet" href="./pretty.css" />
	<link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
	
    <title>Pure HTML/CSS Dropdown Select Menu</title>
    
	<div class="container">
		<p>Pretty example using Bootstrap
		
		<form action="./test.php" method="post">
			<ul class="btn btn-primary  mycssdropdown">
				<li>
					<label>
						<input type="radio" name="avalue" value="option a" checked="checked" />
						<span>Option A</span>
					</label>
				<li>
					<label>
						<input type="radio" name="avalue" value="option b" />
						<span>Option B</span>
					</label>
				<li>
					<span class="caret"></span>
			</ul>
			<br/>
			<input type="submit" />
		</form>
		
		<p>To read more see <a href="http://rmg.io/wordpress/?p=4">the blog post</a>
	</div>

CSS

/*
	Make it pretty with Bootstrap
*/

/*As before, hide the radio buttons and style the ul*/
form .mycssdropdown li label input{
	display:none;
	width:0;
	height:0;
	margin:0;
	padding:0;
	position:absolute;
}

form .mycssdropdown{
	list-style-type:none;
	margin:0;
}

form .mycssdropdown li label span{
	color:#FFFFFF;
	cursor:pointer;
}

/*When the dropdown isn't showing, display the elements inline and show the caret*/
form .mycssdropdown li, form .mycssdropdown li label{
	display:inline;
}

/*When it is showing, hide the caret and display as block*/
form .mycssdropdown:hover li{
	display:block;
}

form .mycssdropdown:hover li span.caret{
	display:none;
}

/*Now hide all the elements except checked*/
form .mycssdropdown li label span{
	display:none;
}

form .mycssdropdown li label input:checked+span{
	display:inline;
}

/*But show them on hover*/
form .mycssdropdown:hover li label span{
	display:inline;
}

/*And highlight the selected one*/
form .mycssdropdown:hover li label input:checked+span{
	font-weight:bold;
}