Bootstrap Snippet Custom search field (not finished) using HTML CSS Bootstrap

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
<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 class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6 text-center">
                <h2>Custom search fields v1.0</h2>
                <form class="searchbox-form" id="form-1">
                     <div class="input-group text-center">
                        <input type="text" class="form-control" placeholder="Search for..." required>
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                    </div><!-- /input-group -->
                </form>
            <p>this custon search expand when used.</p>
            <p>no java or jquery, only CSS <small>(with CSS explained)</small></p>
        </div>
    </div>
</div>
nao terminado
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
35
36
37
body { 
    padding-top: 50px
}
#form-1{
    width:380px;
}
.searchbox-form * {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}
.searchbox-form input.form-control {
    max-width:45%;
    min-width:100px;
    padding-right:0;
    border-right:0; 
    box-shadow:0 0 0; 
    border-color:#ccc;
    float:right;
}
.searchbox-form input.form-control:focus:valid,
.searchbox-form input.form-control:valid,
.searchbox-form input.form-control:focus {
    max-width:100%;
}
.searchbox-form button.btn {
    border-left:0;
    float:left;
}
.searchbox-form button.btn:hover, 
.searchbox-form button.btn:focus {
    background: transparent;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Custom search field (not finished)"
Bootstrap 3.3.0 Snippet by Kr4t0ss

Related: See More

Questions / Comments:

"Custom search field (not finished)" Bootstrap 3.3.0 Snippet by Kr4t0ss

Related: See More

Questions / Comments:

"Custom search field (not finished)"
Bootstrap 3.3.0 Snippet by Kr4t0ss