JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<div>
<select size="1">
<option value="1">Test1</option>
<option value="2">Test2</option>
<option value="3">Test3</option>
</select>
</div>
<div>
<select size="1">
<option value="1">Test1</option>
<option value="2">Test2</option>
<option value="3">Test3</option>
</select>
</div>
<div>
<select size="1">
<option value="1">Test1</option>
<option value="2">Test2</option>
<option value="3">Test3</option>
</select>
</div>
<div>
<select size="1">
<option value="1">Test1</option>
<option value="2">Test2</option>
<option value="3">Test3</option>
</select>
</div>
CSS
select
{
margin-top: 0;
position: static;
height: auto;
width: 180px;
border-collapse: separate;
cursor: pointer;
vertical-align: middle;
max-width: 100%;
outline: medium none;
display: block;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 2px 2px 2px 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
color: black;
font-size: 1.2em;
letter-spacing: 0.1em;
margin-bottom: 5px;
padding: 4.8px 4px;
}
select:focus
{
outline: thin dotted #333333;
outline-offset: -2px;
}
div
{
width:180px;
}
JavaScript
$(document).ready(function() {
fixSelect(document.getElementsByTagName("select"));
});
function fixSelect(selectList)
{
for (var i = 0; i != selectList.length; i++)
{
setActions(selectList[i]);
}
}
function setActions(select)
{
$(select).click(function() {
if (select.getElementsByTagName("option").length == 1)
{
active(select);
}
});
$(select).focus(function() {
active(select);
});
$(select).blur(function() {
inaktiv(select);
});
$(select).keypress(function(e) {
if (e.which == 13) {
inaktiv(select);
}
});
var optionList = select.getElementsByTagName("option");
for (var i = 0; i != optionList.length; i++)
{
setActionOnOption(optionList[i], select);
}
}
/**
* Stänger selection när användarne trycer på
...