input inner add-on

by klode

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
    <div class="col-md-12">
    	<div class='right-inner-addon date datepicker' data-date-format="yyyy-mm-dd">
            <i class="fa fa-calendar"></i>
    		<input name='name' value="" type="text" class="form-control date-picker" data-date-format="yyyy-mm-dd"/>
  			
   		</div>
    </div>

CSS

.right-inner-addon {
    position: relative;
}

.right-inner-addon input{
    padding-right: 30px;
}

.right-inner-addon i{
	
	position:absolute;
	/*text-indent: -15px;
	bottom: -8px;
	font-size: 1.3em;*/
    right: 0px;
    padding: 10px 12px;
}