How to get icons inside the input element?-CodePudding

I want my icons to be inside the input element currently they all are mixed up together.

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 >
            <tr>
              <th>
                <label for="user" >User</label>
              </th>
              <div >
              <i ></i>
              </div>
              <td>
                <input type="text"  />
              </td>
            </tr>
          </div>

          <div >
            <tr>
              <th>
                <label for="address" >Address</label>
              </th>
              <div >
                <i ></i>
              </div>
              <td>
                <input type="text"  />
              </td>
            </tr>
          </div>


          <div >
            <tr>
              <th>
                <label for="password" >Password</label>
              </th>
              <div >
                <i ></i>
              </div>
              <td>
                <input type="text"  />
              </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;
    
}

CodePudding user response：

There is few things wrong, and also it's a very broad question as there is many ways to get the same outcome in CSS/HTML. first the label 'for' option should correspond to inputs 'id'. Your inputs have no IDs so either add them or remove 'for' from labels.

Also code that belongs together, should be together, there is no need to keep the icon outside the table cell.

Consider using pseudo element as an icon, on input element. Mark the input as position relative, add some padding at the front and use absolute positioning to move the pseudo element to required position.