如何在输入元素中获取图标？

Question

我希望我的图标位于 input 元素内，目前它们都混在一起了。

HTML

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
      integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>

  <body>
    <div id="mainContainer">
      <div id="container">
        <table id="mainForm">
          <div class="mainTable">
            <tr>
              <th>
                <label for="user" class="label">User</label>
              </th>
              <div class="icon">
              <i class="fa-solid fa-user"></i>
              </div>
              <td>
                <input type="text" class="inp" />
              </td>
            </tr>
          </div>

          <div class="mainTable">
            <tr>
              <th>
                <label for="address" class="label">Address</label>
              </th>
              <div class="icon">
                <i class="fa-solid fa-location-dot"></i>
              </div>
              <td>
                <input type="text" class="inp" />
              </td>
            </tr>
          </div>


          <div class="mainTable">
            <tr>
              <th>
                <label for="password" class="label">Password</label>
              </th>
              <div class="icon">
                <i class="fa-solid fa-key"></i>
              </div>
              <td>
                <input type="text" class="inp" />
              </td>
            </tr>
          </div>
        </table>

        <div id="mainBtn">
          <button id="btn">Submit</button>
        </div>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;

}

body{
    background-color: rgb(253, 253, 253);
}

#mainContainer{
    background-color: rgb(242, 53, 53);
    width: 600px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    border-radius: 15px;
    box-shadow: 5px 5px 5px rgb(189, 189, 189);
    margin-top: 200px;
    
}

#mainBtn{

    display: flex;
    justify-content: center;
    margin-top: 10px;
    
}

.label{
    color: #fff;
    font-size: 30px;
    font-family: 'Ubuntu', sans-serif;
    margin-right: 15px;
    display: inline-block
    
    
}


.inp{
    border-radius: 5px;
    outline: none;
    border: 2px solid #fff;
    padding: 10px 30px;
    width: 300px;
     
}

#btn{
    
    border-radius: 5px;
    padding: 5px;
    background-color: #fff;
    outline:  none;
    border: 2px solid #fff;
    cursor: pointer;
    font-size: 20px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;

}

#mainForm{
    border-spacing: 0 0.8em;
    position: relative; 

}



.icon{
    position: absolute;
    
}

Answer 1

几乎没有错误，而且这是一个非常广泛的问题，因为在 CSS/HTML 中有很多方法可以得到相同的结果。首先，标签 'for' 选项应对应于输入 'id'。您的输入没有 ID，因此请添加它们或从标签中删除 'for'。

也是属于一起的代码，应该在一起，没有必要把图标放在table单元格之外。

考虑在输入元素上使用伪元素作为图标。将输入标记为相对位置，在前面添加一些padding，并使用绝对定位将伪元素移动到所需位置。

Answer 2

有多种方法可以使用 css 在输入框内添加图标。您可以添加图标作为输入背景并设置填充，或者您可以将图标放在输入旁边并设置图标的位置并使用 css.

使其看起来像在输入内部

如何在输入元素中获取图标？

How to get icons inside the input element?

html

css

flexbox