[Webデザイン]検索バー
html
<div class="search">
<input type="text" />
<div class="material-icons">search</div>
</div>
css.search {
display: inline-block;
height: 34px;
position: relative;
}
.search input {
width: 36px;
height: 34px;
padding: 4px 10px;
border: 1px solid #ccc;
box-sizing: border-box;
border-radius: 5px;
outline: none;
background: #fff;
color: #777;
font-size: 12px;
transition: width 0.4s;
}
.search input:focus {
width: 190px;
border-color: #669900;
}
.search .material-icons {
height: 24px;
position: absolute;
top: 0;
bottom: 0;
right: 5px;
margin: auto;
transition: 0.4s;
}
.search.focused .material-icons {
opacity: 0;
}
javascriptconst searchEl = document.querySelector('.search')
const searchInputEl = searchEl.querySelector('input')
searchEl.addEventListener('click',function(){
searchInputEl.focus();
})
searchInputEl.addEventListener('focus', function(){
searchEl.classList.add('focused')
searchInputEl.setAttribute('placeholder','통합검색')
})
searchInputEl.addEventListener('blur', function(){
searchEl.classList.remove('focused')
searchInputEl.setAttribute('placeholder','')
})
input
にwidth
を少なく施し、選択時にtransition
を加えると効果が幅を増す.Reference
この問題について([Webデザイン]検索バー), 我々は、より多くの情報をここで見つけました https://velog.io/@tjdgus3160/웹디자인-검색바テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol