<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>
@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%);
background: -ms-linear-gradient(top, #dfebf3 0%, #f4fafe 100%);
background: linear-gradient(to bottom, #dfebf3 0%, #f4fafe 100%);
display: block;
height: 54px;
margin: 20px auto;
position: relative;
text-align: center;
width: 314px;
-moz-box-shadow: 0 0 2px #153d57, inset 0 0 2px #fff;
-o-box-shadow: 0 0 2px #153d57, inset 0 0 2px #fff;
-webkit-box-shadow: 0 0 2px #153d57, inset 0 0 2px #fff;
box-shadow: 0 0 2px #153d57, inset 0 0 2px #fff;
}
.search {
background: url(http://storage1.static.itmages.ru/i/15/0627/h_1435422771_3884706_7635bc9a24.png) no-repeat 7px 50% #d8e6ef;
border-bottom: 1px solid #ebf3f8;
border-left: 1px solid #cadae4;
border-right: 1px solid #cadae4;
border-top: 1px solid #aec1ce;
color: #304e62;
height: 35px;
margin: 8px 0 0;
padding: 0 0 0 41px;
text-shadow: 0 1px rgba(255, 255, 255, .8);
width: 255px;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-webkit-appearance: none;
-moz-box-shadow: inset 0 1px #cadae4;
-o-box-shadow: inset 0 1px #cadae4;
-webkit-box-shadow: inset 0 1px #cadae4;
box-shadow: inset 0 1px #cadae4;
}
.search:focus {
outline: none;
-moz-box-shadow: inset 0 0 2px #000;
-o-box-shadow: inset 0 0 2px #000;
-webkit-box-shadow: inset 0 0 2px #000;
box-shadow: inset 0 0 2px #000;
}
.submit-btn {
background: #ffb900;
background: url(data:image/svg+xml;base64\,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYjkwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjhjMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffb900 0%, #ff8c00 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb900), color-stop(100%,#ff8c00));
background: -webkit-linear-gradient(top, #ffb900 0%, #ff8c00 100%);
background: -o-linear-gradient(top, #ffb900 0%, #ff8c00 100%);
background: -ms-linear-gradient(top, #ffb900 0%, #ff8c00 100%);
background: linear-gradient(to bottom, #ffb900 0%, #ff8c00 100%);
box-shadow: inset 0 1px #ffff00;
border: 1px solid #aa7818;
color: #643904;
cursor: pointer;
height: 36px;
outline: none;
position: absolute;
right: 8px;
text-shadow: 0 1px #ffc600;
top: 8px;
width: 61px;
}
.submit-btn:active {
background: #ff8c00;
background: url(data:image/svg+xml;base64\,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmOGMwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmI5MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ff8c00 0%, #ffb900 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8c00), color-stop(100%,#ffb900));
background: -webkit-linear-gradient(top, #ff8c00 0%, #ffb900 100%);
background: -o-linear-gradient(top, #ff8c00 0%, #ffb900 100%);
background: -ms-linear-gradient(top, #ff8c00 0%, #ffb900 100%);
background: linear-gradient(to bottom, #ff8c00 0%, #ffb900 100%);
}
.notice {
background: #eef6fb;
background: url(data:image/svg+xml;base64\,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZjZmYiIgc3RvcC1vcGFjaXR5PSIxIi8+CICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkOGU2ZWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #eef6fb 0%, #d8e6ef 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eef6fb), color-stop(100%,#d8e6ef));
background: -webkit-linear-gradient(top, #eef6fb 0%, #d8e6ef 100%);
background: -o-linear-gradient(top, #eef6fb 0%, #d8e6ef 100%);
background: -ms-linear-gradient(top, #eef6fb 0%, #d8e6ef 100%);
background: linear-gradient(to bottom, #eef6fb 0%, #d8e6ef 100%);
color: #304e62;
display: none;
height: 35px;
line-height: 35px;
margin: 0 auto;
padding: 0 21px;
position: relative;
text-shadow: 0 1px rgba(255, 255, 255, .7);
width: 277px;
-moz-box-shadow: inset 0 0 1px #fff;
-o-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
box-shadow: inset 0 0 1px #fff;
}
.notice span {
border-bottom: 1px dotted #000;
font-style: italic;
}
.notice p:before {
background: url(http://verstaka.net/examples/html-css/search-form/images/rect.png) no-repeat;
content: '';
height: 13px;
position: absolute;
top: -12px;
width: 22px;
}
.search-form,
.search,
.submit-btn,
.notice {
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
$(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);
});
});
