Add a random background image to the search box

 เพิ่มภาพพื้นหลังแบบสุ่มลงในช่องค้นหา

JS

 

  const id = document.querySelector('#search-form')

    if (id && id.txtInput) {

      const name = id.txtInput;

      const unclicked = () => {

        if (name.value == '') {

          name.style.background = '#FFFFFF url(https://source.unsplash.com/65x32/?wallpapers) no-repeat right bottom';

        }

      };

      const clicked = () => {

        name.style.background = '#FFFFFF';

      };

      name.onfocus = clicked;

      name.onblur = unclicked;

      unclicked();

    }

  })

HTML

 

  <form class="d-flex" role="search" name="searchform" id="search-form">

      <div class="input-group input-group-sm" id="input-form">

        <input name="txtInput" type="text" class="form-control rounded-pill" placeholder="Search">

        <button class="btn btn-outline-secondary rounded-circle" type="button" id="btn-search">

          <i class="lni lni-search-alt pt-1"></i>

        </button>

      </div>

    </form>

CDN

<link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

Random image link

https://source.unsplash.com/widthxheight/?category

https://source.unsplash.com/65x32/?wallpapers

Ref. https://unsplash.com