コピペで使えるVueの検索フォームコンポーネント

こういうの

前提

• Vue3
• Bootstrap5

コード

<template>
  <div class="form">
    <i class="fa fa-search"></i>
    <input type="text" class="form-control form-input" placeholder="キーワードを入力...">
  </div>
</template>

<style scoped>
.form {
  position: relative;
}

.form .fa-search {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #9ca3af;

}

.left-pan {
  padding-left: 7px;
}

.left-pan i {
  padding-left: 10px;
}

.form-input {
  height: 55px;
  text-indent: 33px;
  border-radius: 10px;
}

.form-input:focus {
  box-shadow: none;
  border: none;
}
</style>