小さなアイコンを入力に追加する 2 つの JS メソッド-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

小さなアイコンを入力に追加する 2 つの JS メソッド

Dec 22, 2017 am 10:36 AM

input javascript 成し遂げる

この記事では、小さなアイコンを入力に追加するための 2 つの JS メソッドを主に紹介します。実装するのは少し難しいですが、エディターでは、JS 入力に小さなアイコンを追加する 2 つの方法を紹介しますので、参考にしていただければ幸いです。

方法 1

入力の背景として小さなアイコンを挿入し、コードを入力するだけです:

&lt;style type=&quot;text/css&quot;&gt;
      *{
        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;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p class=&quot;box&quot;&gt;
      &lt;input type=&quot;text&quot; class=&quot;username&quot; value=&quot;搜索&quot;/&gt;
    &lt;/p&gt;
  &lt;/body&gt;

ログイン後にコピー

方法 2

i タグを使用して挿入

&lt;style type=&quot;text/css&quot;&gt;
      *{
        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;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p class=&quot;box&quot;&gt;
      &lt;i class=&quot;icon-search&quot;&gt;&lt;/i&gt;
      &lt;input type=&quot;text&quot; class=&quot;username&quot; value=&quot;搜索&quot;/&gt;
    &lt;/p&gt;
  &lt;/body&gt;

ログイン後にコピー