[input 박스 꾸미기] input 박스 안에 아이콘 넣기

완성샷 : 

알고리즘 : 

1.  input 박스를 감싸는 태그(div)의 css는 position을 relative로 설정하기
2.  input 박스를 감싸는 태그(div)의 css는 display를 inline-block으로 설정하기
3. img css의 position을 absolute로 설정하기
4. input의 padding과 img의 위치를 설정한다.

 

코드 : 

<template>

  

    <div class="search" >

          <input type="text"      v-model="inputRest" class ="search_bar"

             @focus="modal=true" @blur="modal=false"             />

          <img src="https://img.icons8.com/ios-glyphs/2x/search.png" class="icon" />

          <div v-if="inputRestList&&modal" class="auto_list">        

            <li v-for="rest in 5" class="list-group-item" @click="clickevent(inputRestList[rest-1])"> {{inputRestList[rest-1]}}</li>          

          </div>

    </div>

 

</template>

<script lang="ts" setup>

 

</script>

<style scoped>

 

.search{

  position: relative;

  display: inline-block;

}

 

.icon{

  position: absolute;

  top:20%;

  left:1%;

  width: 30px;

  padding:5px;

  opacity: 70%;

}

</style>