Вариант 1 - Круглая раздвижная форма поиска
Разметка HTML
<form style="text-align:center;" id="demo-b" title=" " onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/">
<input placeholder="" type="search" method="get" required="required" name="q" autocomplete="off" minlength="3" >
</form>
CSS
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none; /* remove the search and cancel icon */
}
input[type=search] {
background: url(http://demo.madeas.ru/1134/searchwh.png) no-repeat 9px center;
border: solid 2px #fff;
background-color: transparent;
padding: 7px 14px 7px 14px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
background: url(/icon/search-mini-psp.png) no-repeat 9px center;
border-color: #777;
-webkit-box-shadow: 0 0 5px rgba(51,51,51,.5);
-moz-box-shadow: 0 0 5px rgba(51,51,51,.5);
box-shadow: 0 0 5px rgba(51,51,51,.5);
}
#demo-b input[type=search] {
width: 10px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-b input[type=search]:hover {
background: #fff url(/icon/search-mini-psp.png) no-repeat 9px center;
border-color:none;
}
#demo-b input[type=search]:focus {
width: 130px;
padding-left: 30px;
color: #333;
background-color: #fff;
}
#demo-b input:-moz-placeholder {/* inviz text color */
color: transparent;
}
#demo-b input::-webkit-input-placeholder {/* inviz text color */
color: transparent;
}
Здесь используются специальные атрибуты HTML5 placeholder и required:
placeholder- данный атрибут задает вывод текста в поле перед тем, как поле получит фокус ввода, затем текст скрывается.
required- данный атрибут задает обязательное условие наличие информации в поле ввода перед отправкой формы.
HTML5 также имеет новое значение для атрибута type: type="search". Но она плохо поддерживается в браузерах, поэтому мы не будем его пока использовать.
ПРОВЕРЕНО!
Вариант 2 - Форма поиска с подсказкой
CSS
/* форма поиска */
.inputbox {
height: 50px;
width: 300px;
position: absolute;
top: 10%;
left: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.inputbox input {
width: 100%;
min-width: 0;
box-sizing: border-box;
font-size: 16px;
padding: 16.5px 0;
border: 0;
background: none;
width: 50px;
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 100%;
-webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
-webkit-transition-delay: 0s, 0.4s, 0s;
transition-delay: 0s, 0.4s, 0s;
box-shadow: 0 0 0 0px #f4f4f4;
color: #fff;
cursor: pointer;
padding: 16.5px 0;
padding-right: 50px;
font-weight: lighter;
}
.inputbox input:focus, .inputbox input:valid {
width: 100%;
-webkit-transition-delay: 0.4s, 0s, 0.4s;
transition-delay: 0.4s, 0s, 0.4s;
outline: 0;
border-radius: 0;
cursor: text;
padding-left: 16.5px;
}
.inputbox input:focus + .del, .inputbox input:valid + .del {
pointer-events: all;
left: calc(100% - 25px);
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.inputbox input:focus + .del:focus, .inputbox input:valid + .del:focus {
box-shadow: 0 0 0 1px currentColor;
height: 37.5px;
width: 37.5px;
}
.inputbox input:focus + .del:before, .inputbox input:valid + .del:before {
-webkit-transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.7);
transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.7);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.inputbox input:focus + .del:after, .inputbox input:valid + .del:after {
-webkit-transform: translate(-50%, -50%) rotate(45deg) scaleY(0.7);
transform: translate(-50%, -50%) rotate(45deg) scaleY(0.7);
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.inputbox .del {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 50px;
width: 50px;
padding: 0;
background: #0a8fcc;
border-radius: 100%;
border: 0;
pointer-events: none;
-webkit-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
-webkit-transition-delay: 0s;
transition-delay: 0s;
color: inherit;
cursor: pointer;
}
.inputbox .del:focus {
outline: none;
}
.inputbox placeholder {color:#fff}
.inputbox .del:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: #000;
width: 1px;
height: 37.5px;
-webkit-transform: translate(32.25px, 32.25px) translate(-50%, -50%) rotate(-45deg) scaleY(1);
transform: translate(32.25px, 32.25px) translate(-50%, -50%) rotate(-45deg) scaleY(1);
-webkit-transition: -webkit-transform 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.inputbox .del:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: #000;
width: 1px;
height: 37.5px;
-webkit-transform: translate(-50%, -50%) rotate(45deg) scaleY(0);
transform: translate(-50%, -50%) rotate(45deg) scaleY(0);
-webkit-transition: -webkit-transform 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}/* подсказка */
.column {
padding:0;
margin:0;
display:inline-block;
}
.icon-info {
position:relative;
z-index:24;
border-radius:4px;
border: 1px solid #DEEBFC;
padding:0;
margin:0;
}
.icon-info:hover {
z-index:25;
background: none;
}
.icon-info span {
display:none;
}
.icon-info:hover span {
display:block;
position:absolute;
min-width:300px;
width: 400px;
z-index:25;
top:30px;
left:45%;
text-align: left;
border-radius: 4px;
background: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:5px 5px 5px 35px;
text-decoration:none;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
}
.icon-info:hover img {
position: absolute;
border: 0;
margin: -25px 0 0 -55px;
float: left;
}
.icon-info:hover em {
font-size: 1.2em;
font-weight: bold;
display: block;
padding: 0.2em 0 0.6em 0;
}
HTML
<a class="column icon-info" style="text-decoration:none" href="#">
<form title=" " class="inputbox" action="/search/" method="get">
<input required="required" name="q" autocomplete="off" minlength="3" placeholder="Поиск по сайту...">
<button type="reset" class="del"></button>
</form>
<span class="custom Info"><img src="/icon/tooltip/Info.png" alt="Помощь" height="48" width="48" />
<em>Помощь</em>- Нажмите на лупу для осуществления поиска<br>- Введите текст в появившееся поле<br>- Нажмите Enter для продолжения</span>
</a>
ПРОВЕРЕНО!
| View demo |
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят: Похожие материалы не найдены
| Feedback: 0 | |