Bootstrap Snippet input box with select using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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;">
    <div class="form-group">
        <div class="input-group">
            <input type="text" class="form-control" aria-label="..." id="node-label" placeholder="Название цели">
            <div 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>
            </div>
        </div>
    </div>  
    <div class="form-group">
        <div class="form-item form-item-node-type form-type-select">
            <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>
    </div>
    <div class="form-group">
            <div class="form-item form-item-node-type form-type-select form-group">
                <input class="form-control" type="url" id="node-link" placeholder="https://">
            </div>
    </div>
    <small class="pull-right">Coded by <a href="http://maksit.ru" target="_blank">dr.Vlad</a></small>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#network-popUp {
    display:none;
    position:absolute;
    top:45vh;
    left:35vw;
    z-index:234;
    width:490px;
    height:150px;
    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); /* Параметры тени */
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
//@import url("https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js")
$('select').select2({
  placeholder: 'Select an option'
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"input box with select"
Bootstrap 3.3.0 Snippet by comandor

Related: See More

Questions / Comments:

"input box with select" Bootstrap 3.3.0 Snippet by comandor

Related: See More

Questions / Comments:

"input box with select"
Bootstrap 3.3.0 Snippet by comandor