Deux méthodes JS pour ajouter de petites icônes à l'entrée-js tutoriel-php.cn

Deux méthodes JS pour ajouter de petites icônes à l'entrée

小云云

Libérer： 2017-12-22 10:36:53

original

4102 Les gens l'ont consulté

Dans cet article, nous présentons principalement deux méthodes JS pour ajouter de petites icônes à Input. Lors de la création d'un site Web, vous devez souvent ajouter la fonction petite icône à Input. Il semble que la fonction soit très simple, mais elle l'est toujours. un peu délicat à mettre en œuvre. L'éditeur ci-dessous vous présentera deux méthodes pour ajouter de petites icônes dans JS Input. Les amis qui en ont besoin peuvent s'y référer.

Méthode 1

Insérez la petite icône comme arrière-plan de la saisie, entrez simplement le code :

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

Copier après la connexion

Méthode 2

Utilisez la balise i pour insérer

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

Copier après la connexion

Recommandations associées :

JS imitation Alipay entrée affichage loupe numérique

Explication détaillée de la fonction d'invite floue de l'entrée javascript zone de saisie

Comment distinguer les zones de saisie et les boutons

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!