"input box with select"
Bootstrap 3.3.0 Snippet by comandor

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="network-popUp" class="row" style="display: block;"> <span class="has-float-label"> <div class="form-group"> <div class="input-group"> <input class="form-control" type="text" id="node-label"> <label for="node-label" id="popup-node-id">node id</label> <span class="input-group-btn"> <button class="btn btn-success" id="saveButton" type="button"><span class="glyphicon glyphicon-ok"></span></button> <button class="btn btn-default" id="cancelButton" type="button"><span class="glyphicon glyphicon-remove"></span></button> </span> </div><!-- /input-group --> </div> </span> <div class="form-item form-item-node-type form-type-select form-group"> <select class="form-control form-select ajax-processed" id="edit-node-type" name="node_type"> <option value="-1" selected="selected">Select element</option> <option value="8">Default</option> <option value="11">Blue</option> <option value="9">Gray</option> <option value="10">Red</option> </select> </div> <small class="pull-right">Coded by <a href="http://maps.pi8.biz" target="_blank">dr.Vlad</a></small> </div>
@import "https://cdn.rawgit.com/tonystar/bootstrap-float-label/v4.0.0/dist/bootstrap-float-label.css"; #network-popUp { display:none; position:absolute; top:45vh; left:35vw; z-index:234; width:490px; height:100px; background-color: #f9f9f9; border-style:solid; border-width:3px; border-color: #5394ed; padding:5px; text-align: center; box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */ }
@import url("https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js") $('select').select2({ placeholder: 'Select an option' });

Related: See More


Questions / Comments: