<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="toolbox-input">
  <span>
    ⌕
  </span>
  <input type="search" placeholder="Find a tool">
  <i>
    ⌁
  </i>
</label>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.toolbox-input{display:flex;align-items:center;gap:9px;width:268px;padding:9px 12px;border:2px solid #4d5a5b;border-radius:8px;background-color:#d7ded3;background-image:radial-gradient(#7f8f8c 1px,transparent 1px);background-size:8px 8px;color:#3f4d4e;font-family:Arial}.toolbox-input span{display:grid;place-items:center;width:29px;height:29px;border-radius:5px;background:#d88b4b;color:#fff;font-size:19px}.toolbox-input input{flex:1;min-width:0;border:0;outline:0;background:#edf2e9cc;color:#3f4d4e;font-size:14px}.toolbox-input i{font-style:normal;color:#5c7c70;transition:transform .35s}.toolbox-input:focus-within{box-shadow:4px 4px 0 #4d5a5b}.toolbox-input:focus-within i{transform:rotate(-35deg) translateX(-4px)}