Home > Article > Web Front-end > Two JS methods to add small icons to Input

Two JS methods to add small icons to Input

小云云Original: 2017-12-22 10:36:534133browse

In this article, we mainly introduce two JS methods to add small icons to Input. When building a website, you often need to add the small icon function to Input. It seems that the function is very simple, but it is still a bit tricky to implement. The editor below will introduce to you two methods of adding small icons in JS Input. Friends who need it can refer to it. I hope it can help you.

Method 1

Insert the small icon as the background of the input and enter the code directly:

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

Method 2

Use i tag to insert

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

Related recommendations:

JS imitation Alipay input input display digital magnifying glass

javascript input input box fuzzy prompt function detailed explanation

How to distinguish input boxes and buttons

The above is the detailed content of Two JS methods to add small icons to Input. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to the v for command in the vue component and analysis of alarm problems when using v-forNext article：Introduction to the v for command in the vue component and analysis of alarm problems when using v-for

See more

Two JS methods to add small icons to Input

Related articles