この記事では、小さなアイコンを入力に追加するための 2 つの JS メソッドを主に紹介します。実装するのは少し難しいですが、エディターでは、JS 入力に小さなアイコンを追加する 2 つの方法を紹介しますので、参考にしていただければ幸いです。
方法 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入力入力ボックスファジープロンプト機能詳細説明
以上が小さなアイコンを入力に追加する 2 つの JS メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
