<form novalidate class="ais-SearchBox__root" action="" role="search" id="search">
  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-search-13" viewBox="0 0 40 40">
      <path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z" fill-rule="evenodd"></path>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-clear-3" viewBox="0 0 20 20">
      <path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z" fill-rule="evenodd"></path>
    </symbol>
  </svg>
  <div role="search" class="ais-SearchBox__wrapper">
    <input type="search" placeholder="Search here…" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required="" value="" class="ais-SearchBox__input">
    <button type="submit" title="Submit your search query." class="ais-SearchBox__submit">
      <svg role="img">
        <use xlink:href="#sbx-icon-search-13"></use>
      </svg>
    </button>
    <button type="reset" title="Clear the search query." class="ais-SearchBox__reset">
      <svg role="img">
        <use xlink:href="#sbx-icon-clear-3"></use>
      </svg>
    </button>
  </div>
</form>
.ais-SearchBox__root {
    display: inline-block;
    position: relative;
    max-width: 300px;
    width: 100%;
    height: 46px;
    white-space: nowrap;
    box-sizing: border-box;
    font-size: 14px
}

.ais-SearchBox__input, .ais-SearchBox__wrapper {
    width: 100%;
    height: 100%
}

.ais-SearchBox__input {
    padding: 8px 16px;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    display: inline-block;
    -webkit-transition: box-shadow .4s ease, background .4s ease;
    transition: box-shadow .4s ease, background .4s ease;
    border: 1px solid #d4d8e3;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 1px 0 rgba(85, 95, 110, .2);
    padding: 0;
    padding-right: 36px;
    padding-left: 46px;
    vertical-align: middle;
    white-space: normal;
    font-size: inherit;
    appearance: none
}

.ais-SearchBox__input::-webkit-search-cancel-button, .ais-SearchBox__input::-webkit-search-decoration,
.ais-SearchBox__input::-webkit-search-results-button, .ais-SearchBox__input::-webkit-search-results-decoration {
    display: none
}

.ais-SearchBox__input:active, .ais-SearchBox__input:focus, .ais-SearchBox__input:hover {
    box-shadow: none;
    outline: 0
}

.ais-SearchBox__input::-webkit-input-placeholder {
    color: #9faab2
}

.ais-SearchBox__input::-moz-placeholder {
    color: #9faab2
}

.ais-SearchBox__input:-ms-input-placeholder {
    color: #9faab2
}

.ais-SearchBox__input::placeholder {
    color: #9faab2
}

.ais-SearchBox__submit {
    position: absolute;
    top: 0;
    right: inherit;
    left: 0;
    margin: 0;
    border: 0;
    border-radius: 4px 0 0 4px;
    background-color: hsla(0, 0%, 100%, 0);
    padding: 0;
    width: 46px;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    font-size: inherit;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ais-SearchBox__submit:before {
    display: inline-block;
    margin-right: -4px;
    height: 100%;
    vertical-align: middle;
    content: "" 2
}

.ais-SearchBox__submit:active, .ais-SearchBox__submit:hover {
    cursor: pointer
}

.ais-SearchBox__submit:focus {
    outline: 0
}

.ais-SearchBox__submit svg {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    fill: #bfc7d8
}

.ais-SearchBox__reset {
    display: none;
    position: absolute;
    top: 13px;
    right: 13px;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    fill: #bfc7d8
}

.ais-SearchBox__reset:focus {
    outline: 0
}

.ais-SearchBox__reset svg {
    display: block;
    margin: 4px;
    width: 12px;
    height: 12px
}

.ais-SearchBox__input:valid ~ .ais-SearchBox__reset {
    display: block;
    -webkit-animation-name: a;
    animation-name: a;
    -webkit-animation-duration: .25s;
    animation-duration: .25s
}

@keyframes a {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}
const form = document.getElementById('search');
const input = document.querySelector('input[type=search]');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  input.blur();
  console.log(`searching with ${input.value}`);
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.