Как я могу заставить исчезнуть контур поля ввода? - PullRequest
Новая
       16

Как я могу заставить исчезнуть контур поля ввода?

0 голосов
/ 07 мая 2020

При наведении указателя мыши на кнопку отображается поле ввода (показано на рисунке 1) Мой код написан так: 

.search-btn{
    position: relative;
    top: 30%;
    left: 30%;
    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;
}



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

.search-btn:hover{
    width: 200px;
    cursor: pointer;
}

.search-btn:hover .search-txt {
  display: inline-block;
 }

 .search-txt {
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;;
    height: 42.5px;
    line-height: 50px;
    display: none;
    font-size: 1em;
    border-radius: 20px;
    padding: 0 20px;
 }
 
.search-btn:hover .fa{
    background: #941313;
    color: white;
}

Единственный способ избавиться от границы - это удалить {display: inline-block} в search-btn: hover .search-txt и добавить {border: none} и et c. Но тогда это полностью избавляет от самого поля ввода, и я не могу ничего писать в нем (показано на рисунке 2)

Что я делаю не так ?? Заранее спасибо за помощь.

Кстати, у меня html написано так (все внутри шапки) 

<nav>
        <ul>
          <li><a href="about.html">About</a></li>
          <li><a href="stories.html">Stories</a></li>
          <li>
            <a href="resources.html">Resources and Campaigns</a>
          </li>
          <li><a href="contact.html">Contact</a></li>
           
  <li><div class="search-btn">
    <input class="search-txt" type="search" name="" placeholder="Type to search">
    <i class="fa fa-search"></i>
   </div>
  </li>      
   

</ul>
</nav>

Ответы [ 2 ]

0 голосов
/ 08 мая 2020

Isaa c вы можете добавить следующий класс после вашего класса .search-txt 

.search-txt input{
border: none !important;
border-style: none;
padding:10px 5px;
margin:0px 0px;
}
0 голосов
/ 07 мая 2020

Вам нужно использовать border:none; Замените ваш .search-txt css на 

.search-txt {
position: absolute;
top: 0;
left: 0;
width: 100%;;
height: 42.5px;
line-height: 50px;
display: none;
font-size: 1em;
border: none;
padding: 0 20px;
}
...