Решил добавить форму поиска в модальном окне на сайт, все получилось, но когда я захотел добавить ховер эффекты элементам формы, столкнулся с трудностями, так как тот ховер эффект котрый я решил добавить действует на всю форму (линия подчеркивания ниже под кнопкой искать) а не на конкретно поле ввода, + эта линия появляется при наведении на кнопку (на кнопку будет отдельный эффект), я пробовал применять этот эффект только к отдельному элементу input в форме, но тогда эффект вообще отсутствует, подскажите как применить этот эффект правильно, чтоб работало как планировалось? Ниже разметка модального окна с формой и стили (также добавил этот пример в codepen https://codepen.io/dlecode/pen/zaegby)
HTML
<label class="btn" for="modal-1">Открыть</label>
<!-- Модальное окно -->
<div class="modal">
<input class="modal-open" id="modal-1" type="checkbox" hidden>
<div class="modal-wrap" aria-hidden="true" role="dialog">
<label class="modal-overlay" for="modal-1"></label>
<div class="modal-dialog">
<div class="modal-header">
<h2>Поиск по сайту </h2>
<label class="btn-close" for="modal-1" aria-hidden="true"></label>
</div>
<div class="modal-body">
<!--Форма поиска-->
<form class="searchtop" method="post">
<input class="searchtop" autocomplete="off" name="story" placeholder="Введите ваш запрос..." type="search">
<input type="hidden" name="do" value="search" >
<input type="hidden" name="subaction" value="search" >
<button type="submit" id="btntop">Найти</button>
</form>
</div>
</div>
</div>
</div>
CSS
.searchtop {width: 100%; height: 44px; line-height: 44px; border: none; border-radius: 0; border-bottom: 1px solid #fff; background: transparent; color:#fff; font-size: 16px; margin-bottom: 30px;}
#btntop { width: 100%; border: 1px solid #fff; background: transparent; vertical-align: middle; }
/*Hover эффект*/
.searchtop:after{
background-color: #fff;
display: block;
content: "";
height: 1px;
width: 0%;
left:50%;
position:relative;
-webkit-transition: width .3s ease-in-out;
-moz-transition: width .3s ease-in-out;
transition: width .3s ease-in-out;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
transform:translateX(-50%);
}
.searchtop:hover:after{width: 100%;}
/* Стили модального окна */
.modal-header h2 {
color: #fff;
font-size: 20px;
font-weight: normal;
line-height: 1;
margin: 0;
}
/* кнопка закрытия окна */
.modal .btn-close:before {
content: '\2715';
font-family: FontAwesome ;
font-size: 1.7em;
color: #fff;
cursor: pointer;
font-size: 44px;
text-decoration: none;
position: absolute;
right: 5px;
top: -5px;
}
.modal .btn-close:hover {
text-shadow: 0 0px 10px #fff; tansition: all .3s linear; -webkit-transition: all .3s linear; -moz-transition: all .3s linear;
}
/* слой затемнения */
.modal-wrap:before {
content: "";
display: none;
background: rgba(0, 0, 0, .3);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 101;
}
.modal-overlay {
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 102;
}
/* активация слоя затемнения и модального блока */
.modal-open:checked ~ .modal-wrap:before,
.modal-open:checked ~ .modal-wrap .modal-overlay {
display: block;
}
.modal-open:checked ~ .modal-wrap .modal-dialog {
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
top: 20%;
}
/* элементы модального окна */
.modal-dialog {
background: radial-gradient( #3daee7, #1070b9);
border: none;
border-radius: 5px;
position: fixed;
width: 80%;
max-width: 500px;
left: 50%;
top: -100%;
-webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-webkit-transform: translate(-50%, -500%);
-ms-transform: translate(-50%, -500%);
-o-transform: translate(-50%, -500%);
transform: translate(-50%, -500%);
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
-o-transition: -o-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
z-index: 103;
}
.modal-body {
padding: 0 20px 75px 20px ;
}
.modal-header h2 {
font-size: 20px;
margin: 0;
padding: 15px 20px 30px 20px;
color: #fff;
}
.btn-search {background: radial-gradient( #3daee7, #1070b9); border-radius: 22px; color:#FFF; width:44px; height:44px; line-height:44px; text-align: center; font-size:24px; display: block; cursor: pointer;}
.btn-search:hover{text-shadow: 0 0px 10px #fff; tansition: all .3s linear; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; }