Bootstrap Button Dropdown Input Controls
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-0.13.3.min.js"></script>
<br/>
<br/>
<html lang="en" ng-app="mainApp">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Normal Dropdown Button</h5>
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem"><a href="#">Action</a>
</li>
<li role="menuitem">
<div style="display:block"> <span>Action</span>
<button type="submit" class="invisible-input pull-right"><i class="fa fa-check-circle-o fa-lg"></i>
</button>
<button type="submit" class="invisible-input pull-right"><i class="fa fa-times-circle-o fa-lg"></i>
</button>
</div>
</li>
<li role="menuitem"><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li...
CSS
.btn-input {
display: block;
}
.btn-input .btn.form-control {
text-align: left;
}
.btn-input .btn.form-control span:first-child {
left: 10px;
overflow: hidden;
position: absolute;
right: 25px;
}
.btn-input .btn.form-control .caret {
margin-top: -1px;
position: absolute;
right: 10px;
top: 50%;
}
.invisible-input {
background: transparent;
border: none;
}
JavaScript
var mainApp = angular.module('mainApp', ['ui.bootstrap']);