Remove arrows from form element select in Bootstrap 3

Question

I would like to remove the up/down arrows that show up next to the clock icon on right. Here is the image:

Here is the HTML:

<div class="form-group">
    <label class="control-label">Date:</label>
    <div class="right-inner-addon ">
        <i class="glyphicon glyphicon-time"></i>
        <select class="form-control input-lg">
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
        </select>
    </div>
</div> 

After applying the suggest css change below this is the result:

Answer 1

Try this using the appearance property:

The appearance property allows you to make an element look like a standard user interface element.

select.form-control {
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}