For the clickable span I want the inside of the glyphicon to be white and not show the elements behind it. How do I do that?
<!-- language: lang-html --><ul class="summary">
<li></li>
<li class="summary-pendingitem">
<input id="input-newrating-text" class="summary-pendingitem-text"
placeholder="rating's text"/>
<input id="input-newrating-color" class="summary-pendingitem-color"
placeholder="rating's color"/>
<span id="btn-addrating" class="glyphicon glyphicon-plus-sign"></span>
</li>
</ul>
<!-- language: lang-css -->
.summary{
position: relative;
list-style-type: none;
max-width: 18em;
margin-top: 1em;
}
.summary li{
border: 1px solid gray;
}
.summary li input{
margin: .3125em;
width: 96%;
}
#btn-addrating{
position: absolute;
top: -0.313em;
right: -0.313em;
font-size: 2em;
color: #77dd77;
}