How to style inside a glyphicon?

Question

For the interactive range, I want the inside of the glyphicon to be white and not display the elements behind it. How to do it?

<ul class="summary">
    <li></li>
    <li class="summary-pendingitem">
        <input id="input-newrating-text" class="summary-pendingitem-text" 
               placeholder="rating text"/>
        <input id="input-newrating-color" class="summary-pendingitem-color" 
               placeholder="rating color"/>
        <span id="btn-addrating" class="glyphicon glyphicon-plus-sign"></span>
    </li>
</ul>

.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; 
}

Answer 1

Elements can have both background-color, and background-image.

Just add the background color to the glyphicon element.

.glyphicon-plus-sign {
    background: white;
}

Demo in jsFiddle