이 글에서는 입력에 작은 아이콘을 추가하는 두 가지 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!