JSFiddle - React, Tailwind, and code Playground
HTML
<div class="selectdiv">
<select class="selectboxdiv">
<option>choose preset...</option>
<option>two</option>
<option>something</option>
<option>4</option>
<option>5</option>
</select>
<div class="out">XCZXCzxcxz</div>
</div>
<div class="selectdiv">
<select class="selectboxdiv">
<option>choose preset...</option>
<option>two</option>
<option>something</option>
<option>4</option>
<option>5</option>
</select>
<div class="out">XCZXCzxcxz</div>
</div>
CSS
.selectdiv {
width:220px;
border:1px solid #ccc;
height:25px;
background:url(http://i48.tinypic.com/2u7rpec.png) no-repeat right center;
border-radius:3px;
cursor:pointer;
}
.selectdiv:hover, .selectdiv:focus {
width:220px;
border:1px solid #ccc;
height:25px;
background: url(http://i48.tinypic.com/2u7rpec.png) no-repeat right;
border-radius:3px;
cursor:pointer;
}
.selectdiv div {
z-index:-1;
border:0px solid #000;
height:23px;
overflow:hidden;
padding:1px 0px 0px 5px;
cursor:pointer;
}
.selectboxdiv {
height: 25px;
left: 9px;
margin-top: 0;
position: absolute;
width: 220px;
z-index: 2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
cursor:pointer;
}
JavaScript
$(document).ready(function () {
$("select").change(function () {
var str = "";
str = $(this).find(":selected").text();
$(this).next(".out").text(str);
}).trigger('change');
})