SelectBox hack

dabblet.css

/**
 * SelectBox hack
 */
body{
	background-color: rgba(30,70,150,0.5);
	font-family:Arial;
}
.cnt{
	width:200px;
	margin:150px auto;
 }
select{ margin-bottom:20px; }

.selectBox{
	height:30px;
	width:200px;
	background-color:white;
	position:relative;
	cursor:pointer;
}
.selectOptions{
	list-style:none;
	margin:0;
	padding:0;
	display:none;
	position:absolute;
	bottom:-100%;
	background-color:white;
	width:100%;
}
.selectBox:focus .selectOptions,
.selectOptions:focus{
	display:block;
}
.selectOption:hover,
.selectOption:focus{
	background-color:rgba(30,70,150,0.5);
}

dabblet.html

<div class="cnt">
<select>
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
<div class='selectBox' tabindex="0"  id="knownas">
	<span class='selected'></span>
	<ul class="selectOptions" tabindex="0">
		<li class="selectOption" tabindex="0" value="">Select an option</li>
		<li class="selectOption" tabindex="0" value="">Select an option</li>
	</ul>
</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}