Блог

Варианты оформления поля Поиска по сайту на CSS

Варианты оформления поля Поиска по сайту на CSS

Обычное поле поиска по сайту можно оформить более оригинально, чем просто инпут с лупой. Например, благодаря анимационным эффектам на CSS3 поле для ввода поисковой фразы можно скрыть, чтобы освободить место для другого контента. Это позволит более рационально использовать пространство страницы (шапки сайта) или, благодаря использованию эффектов, придать сайту некую изюминку. Для наглядности, как можно оформить блок поиска, я предлагаю вам несколько вариантов различного подхода к этой задаче, которые нашел на просторах интернета и сегодня хочу ими с вами поделиться.

Вариант 1. Поиск с иконками выбора области поиска

HTML

<form class="search-form">
<input type="search" value="" placeholder="Search" class="search-input">
<button type="submit" class="search-button">
<svg class="submit-button">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#search"></use>
</svg>
</button>
<div class="search-option">
<div>
<input name="type" type="radio" value="type-users" id="type-users">
<label for="type-users">
<svg class="edit-pen-title">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
</svg>
<span>Users</span>
</label>
</div>

<div>
<input name="type" type="radio" value="type-posts" id="type-posts">
<label for="type-posts">
<svg class="edit-pen-title">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#post"></use>
</svg>
<span>Posts</span>
</label>
</div>
<div>
<input name="type" type="radio" value="type-images" id="type-images">
<label for="type-images">
<svg class="edit-pen-title">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#images"></use>
</svg>
<span>Images</span>
</label>
</div>
<div>
<input name="type" type="radio" value="type-special" id="type-special" checked="">
<label for="type-special">
<svg class="edit-pen-title">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#special"></use>
</svg>
<span>Special</span>
</label>
</div>
</div>
</form>

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none">
<symbol id="search" viewBox="0 0 32 32">
<path d="M 19.5 3 C 14.26514 3 10 7.2651394 10 12.5 C 10 14.749977 10.810825 16.807458 12.125 18.4375 L 3.28125 27.28125 L 4.71875 28.71875 L 13.5625 19.875 C 15.192542 21.189175 17.250023 22 19.5 22 C 24.73486 22 29 17.73486 29 12.5 C 29 7.2651394 24.73486 3 19.5 3 z M 19.5 5 C 23.65398 5 27 8.3460198 27 12.5 C 27 16.65398 23.65398 20 19.5 20 C 15.34602 20 12 16.65398 12 12.5 C 12 8.3460198 15.34602 5 19.5 5 z" />
</symbol>
<symbol id="user" viewBox="0 0 32 32">
<path d="M 16 4 C 12.145852 4 9 7.1458513 9 11 C 9 13.393064 10.220383 15.517805 12.0625 16.78125 C 8.485554 18.302923 6 21.859881 6 26 L 8 26 C 8 21.533333 11.533333 18 16 18 C 20.466667 18 24 21.533333 24 26 L 26 26 C 26 21.859881 23.514446 18.302923 19.9375 16.78125 C 21.779617 15.517805 23 13.393064 23 11 C 23 7.1458513 19.854148 4 16 4 z M 16 6 C 18.773268 6 21 8.2267317 21 11 C 21 13.773268 18.773268 16 16 16 C 13.226732 16 11 13.773268 11 11 C 11 8.2267317 13.226732 6 16 6 z" /></symbol>
<symbol id="images" viewbox="0 0 32 32">
<path d="M 2 5 L 2 6 L 2 26 L 2 27 L 3 27 L 29 27 L 30 27 L 30 26 L 30 6 L 30 5 L 29 5 L 3 5 L 2 5 z M 4 7 L 28 7 L 28 20.90625 L 22.71875 15.59375 L 22 14.875 L 21.28125 15.59375 L 17.46875 19.40625 L 11.71875 13.59375 L 11 12.875 L 10.28125 13.59375 L 4 19.875 L 4 7 z M 24 9 C 22.895431 9 22 9.8954305 22 11 C 22 12.104569 22.895431 13 24 13 C 25.104569 13 26 12.104569 26 11 C 26 9.8954305 25.104569 9 24 9 z M 11 15.71875 L 20.1875 25 L 4 25 L 4 22.71875 L 11 15.71875 z M 22 17.71875 L 28 23.71875 L 28 25 L 23.03125 25 L 18.875 20.8125 L 22 17.71875 z" />
</symbol>
<symbol id="post" viewbox="0 0 32 32">
<path d="M 3 5 L 3 6 L 3 23 C 3 25.209804 4.7901961 27 7 27 L 25 27 C 27.209804 27 29 25.209804 29 23 L 29 13 L 29 12 L 28 12 L 23 12 L 23 6 L 23 5 L 22 5 L 4 5 L 3 5 z M 5 7 L 21 7 L 21 12 L 21 13 L 21 23 C 21 23.73015 21.221057 24.41091 21.5625 25 L 7 25 C 5.8098039 25 5 24.190196 5 23 L 5 7 z M 7 9 L 7 10 L 7 13 L 7 14 L 8 14 L 18 14 L 19 14 L 19 13 L 19 10 L 19 9 L 18 9 L 8 9 L 7 9 z M 9 11 L 17 11 L 17 12 L 9 12 L 9 11 z M 23 14 L 27 14 L 27 23 C 27 24.190196 26.190196 25 25 25 C 23.809804 25 23 24.190196 23 23 L 23 14 z M 7 15 L 7 17 L 12 17 L 12 15 L 7 15 z M 14 15 L 14 17 L 19 17 L 19 15 L 14 15 z M 7 18 L 7 20 L 12 20 L 12 18 L 7 18 z M 14 18 L 14 20 L 19 20 L 19 18 L 14 18 z M 7 21 L 7 23 L 12 23 L 12 21 L 7 21 z M 14 21 L 14 23 L 19 23 L 19 21 L 14 21 z" />
</symbol>
<symbol id="special" viewbox="0 0 32 32">
<path d="M 4 4 L 4 5 L 4 27 L 4 28 L 5 28 L 27 28 L 28 28 L 28 27 L 28 5 L 28 4 L 27 4 L 5 4 L 4 4 z M 6 6 L 26 6 L 26 26 L 6 26 L 6 6 z M 16 8.40625 L 13.6875 13.59375 L 8 14.1875 L 12.3125 18 L 11.09375 23.59375 L 16 20.6875 L 20.90625 23.59375 L 19.6875 18 L 24 14.1875 L 18.3125 13.59375 L 16 8.40625 z M 16 13.3125 L 16.5 14.40625 L 17 15.5 L 18.1875 15.59375 L 19.40625 15.6875 L 18.5 16.5 L 17.59375 17.3125 L 17.8125 18.40625 L 18.09375 19.59375 L 17 19 L 16 18.40625 L 15 19 L 14 19.59375 L 14.3125 18.40625 L 14.5 17.3125 L 13.59375 16.5 L 12.6875 15.6875 L 13.90625 15.59375 L 15.09375 15.5 L 15.59375 14.40625 L 16 13.3125 z" />
</symbol>
</svg>

SCSS

/*--------------------
App
--------------------*/
.search-form {
position: relative;
top: 50%;
left: 50%;
width: 350px;
height: 40px;
border-radius: 40px;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
transform: translate(-50%, -50%);
background: #fff;
transition: all 0.3s ease;

&.focus {
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
}
}

.search-input {
position: absolute;
top: 10px;
left: 38px;
font-size: 14px;
background: none;
color: #5a6674;
width: 195px;
height: 20px;
border: none;
appearance: none;
outline: none;

&::-webkit-search-cancel-button {
appearance: none;
}
}

.search-button {
position: absolute;
top: 10px;
left: 15px;
height: 20px;
width: 20px;
padding: 0;
margin: 0;
border: none;
background: none;
outline: none!important;
cursor: pointer;

& svg {
width: 20px;
height: 20px;
fill: #5a6674;
}
}

.search-option {
position: absolute;
text-align: right;
top: 10px;
right: 15px;

div {
position: relative;
display: inline-block;
margin: 0 1px;
cursor: pointer;

input {
position: absolute;
top: 0;
left: 0;
opacity: 0.01;
cursor: pointer;
}

span {
position: absolute;
display: block;
text-align: center;
left: 50%;
transform: translateX(-50%);
opacity: 0;
background: #929AA3;
color: #fff;
font-size: 9px;
letter-spacing: 1px;
line-height: 1;
text-transform: uppercase;
padding: 4px 7px;
border-radius: 12px;
top: -18px;
transition: all .2s ease-in-out;

&::after {
content: '';
position: absolute;
bottom: -3px;
left: 50%;
transform: translateX(-50%);
border-top: 4px solid #929AA3;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
transition: all .2s ease-in-out;
}
}

&:hover span {
opacity: 1;
top: -21px;
}

label {
display: block;
cursor: pointer;
}

svg {
height: 20px;
width: 20px;
fill: #5a6674;
opacity: 0.6;
transition: all .2s ease-in-out;
pointer-events: none;
}

&:hover svg {
opacity: 1;
}

input:checked + label svg {
fill: $color;
opacity: .9;
}

input:checked + label span {
background: $color;

&::after {
border-top-color: $color;
}
}
}


}

jQuery

$('.search-input').focus(function(){
$(this).parent().addClass('focus');
}).blur(function(){
$(this).parent().removeClass('focus');
})

Вариант 2. Форма поиска с анимированной кнопкой

HTML

<div id="cover">
<form method="get" action="">
<div class="tb">
<div class="td"><input type="text" placeholder="Search" required></div>
<div class="td" id="s-cover">
<button type="submit">
<div id="s-circle"></div>
<span></span>
</button>
</div>
</div>
</form>
</div>

CSS

.tb
{
display: table;
width: 100%;
}

.td
{
display: table-cell;
vertical-align: middle;
}

input, button
{
color: #fff;
font-family: Nunito;
padding: 0;
margin: 0;
border: 0;
background-color: transparent;
}

#cover
{
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 550px;
padding: 35px;
margin: -83px auto 0 auto;
background-color: #ff7575;
border-radius: 20px;
box-shadow: 0 10px 40px #ff7c7c, 0 0 0 20px #ffffffeb;
transform: scale(0.6);
}

form
{
height: 96px;
}

input[type="text"]
{
width: 100%;
height: 96px;
font-size: 60px;
line-height: 1;
}

input[type="text"]::placeholder
{
color: #e16868;
}

#s-cover
{
width: 1px;
padding-left: 35px;
}

button
{
position: relative;
display: block;
width: 84px;
height: 96px;
cursor: pointer;
}

#s-circle
{
position: relative;
top: -8px;
left: 0;
width: 43px;
height: 43px;
margin-top: 0;
border-width: 15px;
border: 15px solid #fff;
background-color: transparent;
border-radius: 50%;
transition: 0.5s ease all;
}

button span
{
position: absolute;
top: 68px;
left: 43px;
display: block;
width: 45px;
height: 15px;
background-color: transparent;
border-radius: 10px;
transform: rotateZ(52deg);
transition: 0.5s ease all;
}

button span:before, button span:after
{
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 45px;
height: 15px;
background-color: #fff;
border-radius: 10px;
transform: rotateZ(0);
transition: 0.5s ease all;
}

#s-cover:hover #s-circle
{
top: -1px;
width: 67px;
height: 15px;
border-width: 0;
background-color: #fff;
border-radius: 20px;
}

#s-cover:hover span
{
top: 50%;
left: 56px;
width: 25px;
margin-top: -9px;
transform: rotateZ(0);
}

#s-cover:hover button span:before
{
bottom: 11px;
transform: rotateZ(52deg);
}

#s-cover:hover button span:after
{
bottom: -11px;
transform: rotateZ(-52deg);
}
#s-cover:hover button span:before, #s-cover:hover button span:after
{
right: -6px;
width: 40px;
background-color: #fff;
}

Вариант 3. Расширяющаяся панель поиска

Наведите на лупу, чтобы увидеть эффект

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<form action="">
<input type="search">
<i class="fa fa-search"></i>
</form>

CSS

form{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all 1s;
width: 50px;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
}

input{
position: absolute;
top: 0;
left: 0;
width: 100%;;
height: 42.5px;
line-height: 30px;
outline: 0;
border: 0;
display: none;
font-size: 1em;
border-radius: 20px;
padding: 0 20px;
}

.fa{
box-sizing: border-box;
padding: 10px;
width: 42.5px;
height: 42.5px;
position: absolute;
top: 0;
right: 0;
border-radius: 50%;
color: #07051a;
text-align: center;
font-size: 1.2em;
transition: all 1s;
}

form:hover{
width: 200px;
cursor: pointer;
}

form:hover input{
display: block;
}

form:hover .fa{
background: #07051a;
color: white;
}

Вариант 4. Панель поиска на CSS

HTML

<div class="search">
<div class="search_bar">
<input id="searchOne" type="checkbox">
<label for="searchOne">
<i class="icon ion-android-search"></i>
<i class="last icon ion-android-close"></i>
<p>|</p>
</label>
<input placeholder="Search..." type="text">
</div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Nunito:400,700);

*{
//box-sizing:border-box;
}
body{
padding:0;
margin:0;
.column{
background:#F6F792;
height:100vh;
float:left;
width:100%;
position:relative;
}
.two{
background:#F6F792
}
.three{
background:#EA2E49;
}
.four{
background:#333745;
}
.search{
position:absolute;
left:0;
right:0;
margin:auto;
top:50%;
transform:translateY(-50%);
width:100%;
text-align:center;
overflow:hidden;
&_bar{
width:280px;
position:relative;
margin: 0 auto;
input[type="text"]{
width:15px;
background:transparent;
transition:border .3s 0s, width .2s .3s cubic-bezier(0.225, 0.010, 0.475, 1.010), text-indent .2s .3s;
padding: 20px;
border-color:#448996;
text-indent:30px;
outline:none;
border:0px solid #448996;
font-size: 12px;
color: #A8A952;
border-radius:5px;
//text-transform:uppercase;
font-family: 'Nunito', sans-serif;

}
::-webkit-input-placeholder { /* Safari, Chrome and Opera */
color: #448996;
font-weight:400;
font-family: 'Nunito', sans-serif;
}
::-moz-input-placeholder { /* Safari, Chrome and Opera */
color: #448996;
font-weight:400;
font-family: 'Nunito', sans-serif;
}
::-o-input-placeholder { /* Safari, Chrome and Opera */
color: #448996;
font-weight:400;
font-family: 'Nunito', sans-serif;
}
input[type="checkbox"]{
display:none;
}
input[type="checkbox"]:checked + label + input{
width: 230px;
border: 5px solid #448996;
text-indent:0px;
}
input[type="checkbox"]:checked + label i{
right:0px;
transform: translateY(-50%) translateX(50%) rotate(360deg) scale(0);
color: #448996;
&:hover{
//background:white;
}
}
input[type="checkbox"]:checked + label .last{
left:220px;
transform: translateY(-50%) rotate(360deg) scale(1);
&:hover{
//background:white;
}
}
input[type="checkbox"]:checked + label p{
top: 50%;
transition:all .3s .45s;
}
input[type="checkbox"]:not(checked) + label p{
top: -50%;
transition:all .3s 0s;
}
.last{
-webkit-transform: translateY(-50%) rotate(0deg) scale(0);
transform: translateY(-50%) rotate(0deg) scale(0);
}
i{
position: absolute;
font-size: 30px;
top: 50%;
transform: translateY(-50%) translateX(50%) rotate(0deg) scale(1);
cursor: pointer;
z-index: 2;
margin: auto;
border-radius: 4px;
width: 56px;
right: 50%;
height: 54px;
background: transparent;
transition: right .3s .3s, transform .3s .3s, color .3s;
line-height: 60px;
color: #A8A952;
&:hover{
color:#448996;
}
}
p{
position: absolute;
margin: 0;
right: 52px;
color: #448996;
font-weight: 700;
font-size: 30px;
top: -50%;
transform: translateY(-50%) rotate(0deg) scale(1);
}
}
}
}

Вариант 5. Анимация поля поиска на CSS

Наведите на лупу, чтобы увидеть эффект

HTML

<div class="cntr">
<div class="cntr-innr">
<label class="search" for="inpt_search">
<input id="inpt_search" type="text" />
</label>
<p>Hover to see the magic.</p>
</div>
</div>

CSS

/*** COLORS ***/
@bg-color: #913D88;
@txt-color: #FFFFFF;
@icn-color: #FFFFFF;

/*** DEMO ***/
html,body{height:100%;margin:0;}body{background:@bg-color;font:13px monospace;color:@txt-color}p{margin-top:30px}.cntr{display:table;width:100%;height:100%;.cntr-innr{display:table-cell;text-align:center;vertical-align:middle}}

/*** STYLES ***/
.search {
display: inline-block;
position: relative;
height: 35px;
width: 35px;
box-sizing: border-box;
margin: 0px 8px 7px 0px;
padding: 7px 9px 0px 9px;
border: 3px solid @icn-color;
border-radius: 25px;
transition: all 200ms ease;
cursor: text;

&:after {
content: "";
position: absolute;
width: 3px;
height: 20px;
right: -5px;
top: 21px;
background: @icn-color;
border-radius: 3px;
transform: rotate(-45deg);
transition: all 200ms ease;
}

&.active,
&:hover {
width: 200px;
margin-right: 0px;

&:after {
height: 0px;
}
}

input {
width: 100%;
border: none;
box-sizing: border-box;
font-family: Helvetica;
font-size: 15px;
color: inherit;
background: transparent;
outline-width: 0px;
}
}

Вариант 6. Анимация панели поиска

Кликните на лупе, чтобы увидеть эффект

HTML

<form id="content">
<input type="text" name="input" class="input" id="search-input">
<button type="reset" class="search" id="search-btn"></button>
</form>

CSS

#content {
position: absolute;
height: 50px;
width: 300px;
margin-left: 170px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#content.on {
-webkit-animation-name: in-out;
animation-name: in-out;
-webkit-animation-duration: 0.7s;
animation-duration: 0.7s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

input {
box-sizing: border-box;
width: 50px;
height: 50px;
border: 4px solid #ffffff;
border-radius: 50%;
background: none;
color: #fff;
font-size: 16px;
font-weight: 400;
font-family: Roboto;
outline: 0;
-webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
padding 0.2s;
transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
padding 0.2s;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
-webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
}

.search {
background: none;
position: absolute;
top: 0px;
left: 0;
height: 50px;
width: 50px;
padding: 0;
border-radius: 100%;
outline: 0;
border: 0;
color: inherit;
cursor: pointer;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
-webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
}

.search:before {
content: "";
position: absolute;
width: 20px;
height: 4px;
background-color: #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: 26px;
margin-left: 17px;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}

.close {
-webkit-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}

.close:before {
content: "";
position: absolute;
width: 27px;
height: 4px;
margin-top: -1px;
margin-left: -13px;
background-color: #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}

.close:after {
content: "";
position: absolute;
width: 27px;
height: 4px;
background-color: #fff;
margin-top: -1px;
margin-left: -13px;
cursor: pointer;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.square {
box-sizing: border-box;
padding: 0 40px 0 10px;
width: 300px;
height: 50px;
border: 4px solid #ffffff;
border-radius: 0;
background: none;
color: #fff;
font-family: Roboto;
font-size: 16px;
font-weight: 400;
outline: 0;
-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: 0.4s, 0s, 0.4s;
transition-delay: 0.4s, 0s, 0.4s;
-webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
}

JS

// updated
const input = document.getElementById("search-input");
const searchBtn = document.getElementById("search-btn");

const expand = () => {
searchBtn.classList.toggle("close");
input.classList.toggle("square");
};

searchBtn.addEventListener("click", expand);

Вариант 7. Панель поиска

Кликните на лупе, чтобы увидеть эффект

HTML

<div class="container">
<input type="text" placeholder="Search...">
<div class="search"></div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Inconsolata:700');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
width: 100%;
height: 100%;
}

body {
background: #252525;
}

.container {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 300px;
height: 100px;
.search {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 80px;
height: 80px;
background: crimson;
border-radius: 50%;
transition: all 1s;
z-index: 4;
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
// box-shadow: 0 0 25px 0 crimson;
&:hover {
cursor: pointer;
}
&::before {
content: "";
position: absolute;
margin: auto;
top: 22px;
right: 0;
bottom: 0;
left: 22px;
width: 12px;
height: 2px;
background: white;
transform: rotate(45deg);
transition: all .5s;
}
&::after {
content: "";
position: absolute;
margin: auto;
top: -5px;
right: 0;
bottom: 0;
left: -5px;
width: 25px;
height: 25px;
border-radius: 50%;
border: 2px solid white;
transition: all .5s;
}
}
input {
font-family: 'Inconsolata', monospace;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50px;
height: 50px;
outline: none;
border: none;
// border-bottom: 1px solid rgba(255, 255, 255, 0.2);
background: crimson;
color: white;
text-shadow: 0 0 10px crimson;
padding: 0 80px 0 20px;
border-radius: 30px;
box-shadow: 0 0 25px 0 crimson,
0 20px 25px 0 rgba(0, 0, 0, 0.2);
// box-shadow: inset 0 0 25px 0 rgba(0, 0, 0, 0.5);
transition: all 1s;
opacity: 0;
z-index: 5;
font-weight: bolder;
letter-spacing: 0.1em;
&:hover {
cursor: pointer;
}
&:focus {
width: 300px;
opacity: 1;
cursor: text;
}
&:focus ~ .search {
right: -250px;
background: #151515;
z-index: 6;
&::before {
top: 0;
left: 0;
width: 25px;
}
&::after {
top: 0;
left: 0;
width: 25px;
height: 2px;
border: none;
background: white;
border-radius: 0%;
transform: rotate(-45deg);
}
}
&::placeholder {
color: white;
opacity: 0.5;
font-weight: bolder;
}
}
}

Источник информации

Понравилась статья? Поделитесь

Вас может заинтересовать:

  • Градиентная обводка блока на CSS

    Как сделать красивую градиентную обводку блока на одном только CSS? Для этого мы сделаем следующее:

    1. Создадим div.linear-gradient с градиентным фоном;

    2. Создадим внутренний блок div с небольшим отступом.

  • CSS анимация обводки блоков

    Интересные эффекты для границ блоков контента с анимацией, которые вам могут пригодиться при оформлении страниц сайта.

  • Бесплатный ФРОНТЭНД

    Представляю вашему вниманию бесплатные неоновые эффекты для текста на CSS...

  • Эффект вращения с помощью CSS3

    CSS3 позволяет создавать разнообразные эффекты на сайтах без использования javascript и громоздкого flesh. Все последние версии современных браузеров позволяют использовать css3 в полном объеме. Если Вы считаете, что посетители вашего сайта люди прогрессивные и пользуются современными браузерами, которые постоянно обновляют, то Вы смело можете использовать новые технологоии и не заботиться о тех, кто все еще живет в прошлом веке и использует IE5…

Наши услуги по созданию сайтов

Веб дизайн

Разработка дизайна и создание интернет-сайта.

Поддержка сайта

Поддержка работоспособности. Написание текстов и статей. Наполнение товарами.

Готовый дизайн

Готовые шаблоны интернет-магазинов и корпоративных сайтов на HostCMS.

Контекстная реклама

Настройка и ведение рекламной кампании в Директ