Сделать строку ввода из кнопки поиска при помощи CSS?

Question

Кнопка поиска, при нажатии превращается в строку.

Возможно ли как нибудь только при помощи CSS сделать так, что бы она всегда была строкой?

HTML код в "свернутом" состоянии

<div class="x-filterBox-filterInputContainer" role="search"><input class="x-filterBox-filterInput" role="searchbox" maxlength="80" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Искать в плейлисте" aria-hidden="true" value="" tabindex="-1">
  <div class="x-filterBox-overlay"><span class="x-filterBox-searchIconContainer"><svg role="img" height="16" width="16" class="Svg-ulyrgf-0 ghlXvf x-filterBox-searchIcon" aria-hidden="true" viewBox="0 0 16 16"><path d="M11.955 11.157A5.61 5.61 0 107.61 13.22c1.03 0 1.992-.282 2.822-.767l2.956 3.46 1.521-1.299-2.954-3.457zm-4.345.063A3.614 3.614 0 014 7.61 3.614 3.614 0 017.61 4a3.614 3.614 0 013.61 3.61 3.614 3.614 0 01-3.61 3.61z"></path></svg></span></div>
  <button class="x-filterBox-expandButton" data-testid="expand-button" aria-hidden="false"><svg role="img" height="16" width="16" class="Svg-ulyrgf-0 ghlXvf x-filterBox-searchIcon" viewBox="0 0 16 16"><path d="M11.955 11.157A5.61 5.61 0 107.61 13.22c1.03 0 1.992-.282 2.822-.767l2.956 3.46 1.521-1.299-2.954-3.457zm-4.345.063A3.614 3.614 0 014 7.61 3.614 3.614 0 017.61 4a3.614 3.614 0 013.61 3.61 3.614 3.614 0 01-3.61 3.61z"></path></svg></button>
</div>

В "развернутом":

Основное из CSS:

    .x-filterBox-filterInput {
background-color: hsla(0,0%,100%,.1);
border: 0;
border-radius: 4px;
color: hsla(0,0%,100%,.7);
height: 32px;
opacity: 0;
text-overflow: ellipsis;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: opacity width;
transition-property: opacity width;
-webkit-transition-timing-function: cubic-bezier(.3,0,.4,1);
transition-timing-function: cubic-bezier(.3,0,.4,1);
width: 32px;
}

.x-filterBox-filterInputContainer {
position: relative;
}

Answer 1

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

Из плюшек для достаточно современных браузеров - используя :focus-within можно поменять скругление и фон формы, а так же не схлопывать инпут при нажатии кнопки.

document.querySelector('form').addEventListener('submit', function (e) {
  e.preventDefault()
  console.log("Search:", e.target.q.value)
})

* {
  box-sizing: border-box;
}

body {
  background: #555;
}

form {
  line-height: 2em;
  border-radius: 1em;
  float: right;
  margin: .5em .5em .5em auto;
  overflow: hidden; /* некликабельные углы */
  display: flex;  
  transition: all 1s linear;
}

form:hover {
  background: rgba(255, 255, 255, .5);
}

form:focus-within {
  border-radius: .5em;
  background: rgba(255, 255, 255, .5);
}

label, button {
  order: -1;
  width: 2em;
  text-align: center;
  overflow: hidden;
  transition: width 1s step-end;
}

input, button {
  border: none;
  width: 0;
  padding: 0;
  background: transparent;
  outline: none;
}

input {
  transition: width 1s linear;
}

input:focus {
  width: 13em;
  padding-right: .25em;
}

form:focus-within input {
  width: 13em;
}

button {
  width: 0;
  font: inherit;
}

input:focus ~ button {
  width: 2em;
}

input:focus ~ label {
  width: 0;
}

<form>
  <input type="search" id="q" name="q" placeholder="Искать в плейлисте...">
  <label for="q">?</label>
  <button type="submit">?</button>
</form>

БЛОГ НА HUSL

Сделать строку ввода из кнопки поиска при помощи CSS?

Ответы (1 шт):