"Пример верстки поисковой формы"
Bootstrap 3.3.0 Snippet by ASDAFF

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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 ---------->
<hgroup>
<h1>Пример верстки поисковой формы</h1>
<h2>verstaka.net</h2>
</hgroup>
<div class="wrap-search-form">
<form action="http://verstaka.net/examples/html-css/search-form/search-form.html#" id="search-form" class="search-form">
<input type="search" id="search" class="search" placeholder="введите запрос...">
<input type="submit" id="submit-btn" class="submit-btn" value="Найти">
</form>
<div id="notice" class="notice">
<p>например: <span>верстка формы поиска</span></p>
</div>
</div>
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
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic);
* {
margin: 0;
padding: 0;
}
html, body {
font-size: 14px;
height: 100%;
}
body {
background: url(http://storage4.static.itmages.ru/i/15/0627/h_1435422839_9895315_bd1c42f134.png);
}
hgroup {
color: #304e62;
font-family: 'Roboto Condensed', sans-serif;
display: block;
text-align: center;
}
:-moz-placeholder {
color: #304e62;
}
::-webkit-input-placeholder {
color: #304e62;
}
input[type="search"]::-webkit-search-cancel-button {
display: none;
}
.wrap-search-form {
font-family: 'Roboto Condensed', sans-serif;
}
.search-form {
background: #dfebf3;
background: url(data:image/svg+xml;base64\,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RmZWJmMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNGZhZmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #dfebf3 0%, #f4fafe 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dfebf3), color-stop(100%,#f4fafe));
background: -webkit-linear-gradient(top, #dfebf3 0%, #f4fafe 100%);
background: -o-linear-gradient(top, #dfebf3 0%, #f4fafe 100%);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function() {
$('#search-form').submit(function() {
var errVal = 'пустой запрос';
if($('#search').val() == '' || $('.search').val() == errVal) {
$('#search').val(errVal).css({backgroundColor: 'rgba(0,0,0,.1)'});
return false;
};
});
$('#search').focus(function() {
$(this).val('').css({backgroundColor: '#d8e6ef'});
});
$('#search').focus(function() {
$('#notice').fadeIn(400);
});
$('#search').blur(function() {
$('#notice').fadeOut(400);
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro BS3

Questions / Comments: