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

[Anonymous]

Когда я навожу курсор на кнопку, появляется поле ввода (показано на рисунке номер 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} и т. д. Но тогда это полностью избавится от самого поля ввода, и я не смогу ничего написать в нем (показано на картинке 2)

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



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

Код: Выделить всё

[list]
[*][url=about.html]About[/url]
[*][url=stories.html]Stories[/url]
[*]
[url=resources.html]Resources and Campaigns[/url]

[*][url=contact.html]Contact[/url]

[*]
[i]
[/i]

[/list]

Подробнее здесь: https://stackoverflow.com/questions/616 ... -disappear