如何使搜索字段响应？

Question

我开始使用bootstrap navbar，如何使搜索字段动态为Stack Overflow？现在，而不是扩大合同。

{{1}}

Answer 1

我希望这可以帮到你。

https://jsfiddle.net/pablodarde/6r842g4r/

将类名添加到输入搜索字段...

<强> HTML

<div class="col-md-8" style="align-content: right;"><input type="text" name="search" placeholder="Search.." class="alive"> </div>
</div>

<强> CSS

.alive {
  width: 200px;
  transition: all 0.5s;
}

.expand {
  width: 350px;
}

<强>的JavaScript

const input = document.querySelector('.alive');

input.addEventListener('click', () => {
    input.className += ' expand';
});

input.addEventListener('blur', () => {
    input.className = 'alive';
});