이 글에서는 입력에 작은 아이콘을 추가하는 두 가지 JS 방법을 주로 소개합니다. 웹 사이트를 만들 때 입력에 작은 아이콘 기능을 추가해야 하는 경우가 종종 있습니다. 구현하기가 조금 까다롭습니다. 다음은 작은 아이콘 기능입니다. 편집자가 JS 입력에 작은 아이콘을 추가하는 두 가지 방법을 소개합니다. 필요한 친구들이 참고하면 좋겠습니다.
방법 1
작은 아이콘을 입력 배경으로 삽입하고 코드만 입력하세요:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
input{
border: none;
}
.box{
height: 50px;
background: yellow;
}
.box input{
width: 200px;
height: 30px;
border-radius: 15px;
margin: 10px 0;
background: url(image/search.gif) no-repeat;
background-color: white;
background-position: 3px;
padding-left: 30px;
border: 1px solid black;
outline: none;
}
</style>
</head>
<body>
<p class="box">
<input type="text" class="username" value="搜索"/>
</p>
</body>방법 2
i 태그를 사용하여 삽입
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
position: relative;
}
.box .icon-search{
background: url(image/search.gif) no-repeat;
width: 20px;
height: 20px;
position: absolute;
top: 6px;
left: 0;
}
.box .username{
padding-left: 30px;
height: 25px;
}
</style>
</head>
<body>
<p class="box">
<i class="icon-search"></i>
<input type="text" class="username" value="搜索"/>
</p>
</body> 관련 추천:
javascript 입력 입력 상자 퍼지 프롬프트 기능 자세한 설명
위 내용은 입력에 작은 아이콘을 추가하는 두 가지 JS 메서드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
