Zwei JS-Methoden zum Hinzufügen kleiner Symbole zur Eingabe-js-Tutorial-php.cn

Zwei JS-Methoden zum Hinzufügen kleiner Symbole zur Eingabe

小云云

Freigeben： 2017-12-22 10:36:53

Original

4102 Leute haben es durchsucht

In diesem Artikel stellen wir hauptsächlich zwei JS-Methoden vor, um der Eingabe kleine Symbole hinzuzufügen. Beim Erstellen einer Website müssen Sie häufig die Funktion für kleine Symbole zur Eingabe hinzufügen Die Implementierung ist etwas schwierig. Der folgende Editor stellt Ihnen zwei Methoden zum Hinzufügen kleiner Symbole in JS Input vor. Freunde, die es benötigen, können es Ihnen helfen.

Methode 1

Fügen Sie das kleine Symbol als Hintergrund der Eingabe ein, geben Sie einfach den Code ein:

<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>

Nach dem Login kopieren

Methode 2

Verwenden Sie das i-Tag, um

<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>

Nach dem Login kopieren

einzufügen

Verwandte Empfehlungen:

JS-Nachahmung Alipay-Eingabe Eingabeanzeige digitale Lupe

Detaillierte Erläuterung der Fuzzy-Prompt-Funktion der Javascript-Eingabe Eingabefeld

So unterscheiden Sie Eingabefelder und Schaltflächen

Das obige ist der detaillierte Inhalt vonZwei JS-Methoden zum Hinzufügen kleiner Symbole zur Eingabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!