JSFiddle - React, Tailwind, and code Playground
by Schepp
HTML
<div class="wrapper">
<div class="selectbox-styled nice-background">
<div class="dropdown-button nice-background">
<div></div>
</div>
<span>neue Spiele</span>
<select class="gwt-ListBox">
<option value="changed">neue Spiele</option>
<option value="title">alphabetisch</option>
<option value="installations">Top-Spiele</option>
</select>
</div>
</div>
CSS
.wrapper {
position: relative;
width: 80px
}
.nice-background {
background-image: -moz-linear-gradient(top, #F8F8FA, #E6E6E8);
background-image: ms-linear-gradient(top, #F8F8FA, #E6E6E8);
background-image: -o-linear-gradient(top, #F8F8FA, #E6E6E8);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F8F8FA), to(#E6E6E8));
background-image: -webkit-linear-gradient(top, #F8F8FA, #E6E6E8);
background-image: linear-gradient(top, #F8F8FA, #E6E6E8);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#f8f8fa', endColorstr='#e6e6e8');
}
.selectbox-styled {
border: 1px solid #CBCBCF;
border-radius: 3px 3px 3px 3px;
height: 20px;
position: relative;
}
.selectbox-styled select{
position: absolute;
right: 0;
width: 100%;
visibility: hidden;
/* try to hide elements style */
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
}
/*ie9
.selectbox-styled select{
margin-top: -13px;
}*/
/*
ie7
.selectbox-styled select{
margin-top: -15px;
}*/
.selectbox-styled .dropdown-button{
width: 20px;
height: 20px;
position: absolute;
right: 0;
top:0;
z-index: 2;
}
.selectbox-styled .dropdown-button div{
background: url(http://201.159.142.19/cognos/skins/presentation/shared/images/dropdown_arrow.gif) no-repeat center;
height: 20px;
}
.selectbox-styled span{
display: block;
left: 3px;
position: relative;
top: 3px;
width: 100%;
margin-right: 20px;
height: 15px;
z-index: 1;
}