展开搜索栏-如果输入文本，则保持展开状态

Question

使用具有默认折叠状态的搜索栏，单击该搜索栏时，将使用动画展开，当它不再聚焦时，将再次折叠。

如何在搜索字段中输入一些文本，并在输入之外单击时，如果存在文本，搜索栏将保持其展开状态？

body {
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height 100vh;
width: 100%;
padding: 3rem 0;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}

/* Demo 2 */
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}

<form id="demo-2">
<input type="search" placeholder="Search">
</form>

Answer 1

使用:valid选择器以及minlength和required属性。

body {
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height 100vh;
width: 100%;
padding: 3rem 0;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}

/* Demo 2 */
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:valid, /* added */
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}

<form id="demo-2">
<input type="search" placeholder="Search" minlength="1" required>
</form>

Answer 2

对于任何寻找js解决方案的人，因为他们需要以输入容器为目标，并且不能使用:focus:valid和这样的css元素，这里有一个解决方案(css未完成(

const events = () => {
document.addEventListener('click', event => {
if (event.target.closest('input')) {
event.target.closest('.field').classList.add('open');
} else {
document.querySelectorAll('.field').forEach(el => { 
if (el.querySelector('input').value.length == 0) {
el.classList.remove('open');
}
})
}
}) 
} 
events();

<form>
<div class="field">
<input type="text" value="">
</div>
<div class="field">
<input type="text" value="">
</div>
</form>