在HTML网页中实现的一款超高颜值的极简风格搜索框，当输入框获得焦点时，放大镜图标会变成箭头图标，失去焦点，箭头再次恢复为放大镜图标。蓝底色+圆角边框+白色图标+白色搜索文字组成了这款简约搜索框，实现也很简单，基础的HTML结构如下，通过CSS设置搜索框的外观以及图标变化效果，JS响应搜索框的获得以及失去焦点事件。
<form class="search" onsubmit="return false"> <label class="search__label" for="search">Search</label> <div class="search__input-wrap"> <input class="search__input" id="search" type="text" name="search" placeholder="Search…"> <button class="search__button" type="submit" name="search-submit" aria-label="Search"> <svg class="search__icon" viewBox="0 0 36 36" width="36px" height="36px" aria-hidden="true"> <g class="search__icon-g" stroke="currentcolor" stroke-linecap="round" stroke-width="4" transform="translate(6,6)"> <ellipse class="search__icon-ellipse" fill="none" cx="9" cy="9" rx="7" ry="7" transform="rotate(45,9,9)" /> <line class="search__icon-line1" x1="15" y1="15" x2="21" y2="21" /> <line class="search__icon-line2" x1="21" y1="21" x2="15" y2="15" /> <line class="search__icon-line3" x1="21" y1="21" x2="15" y2="15" /> </g> </svg> </button> </div> </form>
