Автоматический перевод между фиксированной и относительной позицией? - PullRequest
Новая
       8

Автоматический перевод между фиксированной и относительной позицией?

0 голосов
/ 04 ноября 2018

Я работаю над проектом, в котором используется панель поиска, для которой фон для небольшого круга вокруг значка увеличивается, чтобы охватить фактическое поле при наведении курсора на любой из них.

Вот мой код: 

<div class='swhole'>
<div class='embtn'><div  id="searchproduct" style="font-size:calc(1vw + 1vh);cursor:pointer; display: inline;" onClick="searchProducts()">&#x1F50D;</div>

<input id="search" style=" color: white; position:absolute; top: calc(((2vw + 1vh)/2)-(1vw + 1vh); );  ; left: 3vw; display: inline; border-style: none; outline: none; background: transparent;  width: 25vw; font-size: calc(1vw + 1vh); " type="text" placeholder=" Search..." name="search" required>
</div>

</div>

При этом используется следующий CSS: 

.embtn {
    position:absolute;
    top:0vh ;
    left: 0vw;
    border-radius: 5vw;

    padding: 0.2vw;
    color: red; 
    width: calc(2vw + 1vh); 
    height: calc(2vw + 1vh);
    background-color: white;
    -webkit-transition: background-color 2s ease-out;
    -webkit-transition: width 0.5s ease-out;
    -o-transition: background-color 2s ease-out;
    -o-transition: width 0.5s ease-out;
    -moz-transition: background-color 2s ease-out;
    -moz-transition: width 0.5s ease-out;
    transition: background-color 2s ease-out;
    transition: width 0.5s ease-out;
}
.embtn:hover {

    background-color: black;
    -webkit-transition: background-color 2s ease-out;
    -webkit-transition: width 0.5s ease-out;
    -o-transition: background-color 2s ease-out;
    -o-transition: width 0.5s ease-out;
    -moz-transition: background-color 2s ease-out;
    -moz-transition: width 0.5s ease-out;
    transition: background-color 2s ease-out;
    transition: width 0.5s ease-out;
    width: 30vw;

}

Предполагается, что все должно быть в одной строке, но я сталкиваюсь с проблемой после того, как фон возвращается в положение по умолчанию ... Панель поиска переходит к следующей строке.

Вот несколько скриншотов:

Рабочая против В противном случае

Как вы можете видеть, сдвиг строки вроде испортил весь стиль: (

Любые предложения приветствуются.

...