Question 293167 in Html Question posted in
Some basic documentation can be found here.

Placing an icon inside an input HTML

I’m trying to place an icon inside an input in html. I have the code below but I can’t get the image to show. I know the path to the image is correct so I can’t find what is wrong here.
My objective is so that the icon appears on the left side of the input, "glued" to the left border.cand the placeholder appears after the icon.

<input type="text" class="login" id="username" placeholder="Username" required>

.login {
    border-radius: 10px;
    border: none;
    width: 30%;
    display: block;
    text-indent: 3rem;
}

#username {
    background-image: url(../wwwroot/images/login-user.png);
    background-repeat: no-repeat;
    background-position: 2px 3px;
}
Tags:

2

Answers


  1. 0

    If you assume that you know that your image path is correct, try once just an image-tag to see if it displays. Use an Image-Tag to cros-check this.

    <img src="your path" alt="user" />

    To solve your problem you can try something like this:

    const label = document.querySelector('label[for="login"]');
const input = document.querySelector('#login');

  // Hide the label when the input is clicked
  input.addEventListener('focus', function() {
    label.style.display = 'none';
  });

  // Show the label when the input loses focus
  input.addEventListener('blur', function() {
    // Check if the input is empty before showing the label
    if (input.value.trim() === '') {
      label.style.display = 'inline-block';
    }
  });
    .login {
  position: realtive;
  border-radius: 10px;
  border: none;
  width: 30%;
  display: block;
  padding: 5px;
}

.fake-placeholder{
  position: absolute;
  top: 10px;
  left: 15px; /* move placeholder to the right when giving pixel sizes */
  color: grey;
}

.user-image {
  /* define image size here */
  height: 10px;
  width: 10px;
}
    <label for="login" class="fake-placeholder">
  <img src="path-to-your-image" class="user-image" alt="user-image"/> Username
</label>
<input type="text" class="login" id="login" required>

    “’

    Login or Signup to reply.
  2. 0

    This is quiet simple to archive with some HTML/CSS

    https://codepen.io/aeolous/pen/Exrpxwv

    The HTML

    <div class="form-element">
  <label for="email">Email</label>
  <div class="input-wrapper">
    <div class="icon">
      <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path d="M3 4a2 2 0 00-2 2v1.161l8.441 4.221a1.25 1.25 0 001.118 0L19 7.162V6a2 2 0 00-2-2H3z" />
        <path d="M19 8.839l-7.77 3.885a2.75 2.75 0 01-2.46 0L1 8.839V14a2 2 0 002 2h14a2 2 0 002-2V8.839z" />
      </svg>
    </div>
    <input type="email" name="email" id="email" placeholder="[email protected]">
  </div>
</div>

    The CSS

    .form-element{  
  max-width:250px; 
}
label {  
 display: block; 
}
svg { 
 width: 24px; 
 height: 24px; 
 color: #666; 
}

.input-wrapper {
 position: relative; 
 border-radius: 10px; 
}
.icon {
 display: flex; 
 position: absolute; 
 top: 0;
 bottom: 0; 
 left: 0; 
 padding-left: 12px; 
 align-items: center; 
 pointer-events: none; 
}

input {
 display: block; 
 padding: 8px;
 padding-left:44px;
 border-radius: 10px; 
 border-width: 0; 
 width: 100%; 
 color: #666; 
 line-height:1.5;
 background-color: #ccc;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search