在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>