Feature selector styled

dabblet.css

/**
 * Feature selector styled
 */
body{
background: #f3f3f3;

}
.feature-selector{
position:relative;
box-shadow: 2px 2px 0px #5486AC;vertical-align: top;margin: 3px;display: inline-block !important;border-radius: 25px;padding: 0.5em;background: #7ABCED;clear: both;text-align: right;
}
.feature-selector select{
  position:relative;
  background: transparent;
  border:0;
  -webkit-appearance: none;
  
}
.feature-selector:after{
	content: "";
	display:block;
	width:0;
	height: 0;
	background: transparent;
	border: 0.4em solid #5486AC;
	border-bottom-color:transparent;
	border-left-color:transparent;
	border-right-color:transparent;
	position:absolute;
	top: 1em;
	right: 3px;
	z-index:100;
}

.delete{
 
 background-color: #bddef6;
 color: #7ABCED;
 display: inline-block;
 font-family: sans-serif;
 text-decoration: none;
 font-weight:bold;
 width: 1.5em;
 height: 1.5em;
 text-align: center;
 border-radius: 1em;
 font-size: 10px;
 float: left;
 line-height: 1.5em;
}

dabblet.html

<div class="feature-selector">
<a href="#" class="trigger float-right delete ss-icon" data-trigger="removeFeature">X</a>
	Drape
<select name="stuff">
	<option value="flowy">Flowy</option>
	<option value="stiff">Stiff</option>
	<option value="normal">Normal</option>
</select>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}