0

Решил добавить форму поиска в модальном окне на сайт, все получилось, но когда я захотел добавить ховер эффекты элементам формы, столкнулся с трудностями, так как тот ховер эффект котрый я решил добавить действует на всю форму (линия подчеркивания ниже под кнопкой искать) а не на конкретно поле ввода, + эта линия появляется при наведении на кнопку (на кнопку будет отдельный эффект), я пробовал применять этот эффект только к отдельному элементу 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; }

1 ответ 1

1

Линия под полем:

.searchtop {width: 100%; height: 44px; line-height: 44px; border: none; border-radius: 0; position: relative; outline: 0; background: transparent; color:#fff;  font-size: 16px; margin-bottom: 30px;}

#btntop { width: 100%;  border: 1px solid #fff; background: transparent; vertical-align: middle; }


/*Hover эффект*/
.searchline{
    background-color: #fff;
    display: block;
    height: 1px;
    width: 0%;
    left:50%;
    position:absolute;
    top: 44px;
    -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%);
}
form input:hover + .searchline{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; }


.body{background: #000;}
<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">  

                          <div class="inp-wrp">
                           <input class="searchtop" autocomplete="off" name="story" placeholder="Введите ваш запрос..." type="search">
                           <div class="searchline"></div>
                           </div>
                           <input  type="hidden" name="do" value="search" >
                           <input  type="hidden" name="subaction" value="search" >
                            <button type="submit" id="btntop">Найти</button>
                      
                   </form>

Линия там же где и в примере:

.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 эффект*/
.searchline{
    background-color: #fff;
    display: block;
    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%);
}
form input:hover ~ .searchline{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; }


.body{background: #000;}
<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>
                      <div class="searchline"></div>
                   </form>

 

      </div>
      
    </div>
  </div>
</div>
  

3
  • Линия должна появлятся под окошком ввода, там где нужно вводить текст, там где линия под словами "Введите ваш запрос", таким образом линия станет толще в 2 раза, и только при наведении на это самое окошко
    – Zin Me
    2 июл 2018 в 10:51
  • @ZinMe Добавил еще один пример
    – Get-Web
    2 июл 2018 в 11:12
  • Да, спасибо, это то что надо, я пытался этот эффект в input вставить, а оказывается нужно было создать отдельный блок с линией
    – Zin Me
    2 июл 2018 в 12:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.