having problem when I want to put image inside input-CodePudding

why I can't put an image inside input with positions???

input right now:

<div >
    <input  id="password-input" type="password" minlength="8" title="Must contain at least 8 or more characters" placeholder="رمز عبور" required>
<img  src="Eye.svg" alt="">
</div>

.main-input {
    /* box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.040);
    background-color: #f1f1f1; */

    box-shadow: 0 0 20px 0 #00000025;
    background-color: #fff;
    
    border: none;
    outline: none;
    border-radius: 7px;
    padding: 17px 30px;
    margin: 10px 0;
    width: 60%;
    direction: rtl;
    transition: 0.5s;
    position: relative;
}

.password-show-icon {
    position: absolute;
}

please help me! I really need help. thanks

CodePudding user response：

Please, check, I just replace the eye icon with an online image CDN, to show it.

.password-container {
  position: relative;
  display: inline;
}

.main-input {
    /* box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.040);
    background-color: #f1f1f1; */

    box-shadow: 0 0 20px 0 #00000025;
    background-color: #fff;
    
    border: none;
    outline: none;
    border-radius: 7px;
    padding: 17px 35px;
    margin: 10px 0;
    width: 60%;
    direction: rtl;
    transition: 0.5s;
    position: relative;
}

.password-show-icon {
    position: absolute;
    top: 0;
    right: 5px;
}

<div >
    <input  id="password-input" type="password" minlength="8" title="Must contain at least 8 or more characters" placeholder="رمز عبور" required>
<img  src="https://img.freepik.com/free-vector/businessman-character-avatar-isolated_24877-60111.jpg?w=2000" alt="" width="20" height="20">
</div>

CodePudding user response：

this should do the trick

  .password-container {
    position: relative;
  }


  .main-input {
    /* box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.040);
    background-color: #f1f1f1; */

    box-shadow: 0 0 20px 0 #00000025;
    background-color: #fff;
    
    border: none;
    outline: none;
    border-radius: 7px;
    padding: 17px 30px;
    margin: 10px 0;
    width: 60%;
    direction: rtl;
    transition: 0.5s;
  }

  .password-show-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
  }

<label for="password-input" >
  <input  id="password-input" type="password" minlength="8" title="Must contain at least 8 or more characters" placeholder="رمز عبور" required>
  <img  src="Eye.svg" alt="eye">
</label>

CodePudding user response：

Here is an example of one way to accomplish this, involving putting both elements into a contiainer, and just placing one absolutely to the top right.

const $ = str => document.querySelector(str);

const input = $("input");

$(".show-password").addEventListener("click", () => {
  const newType = input.type == "text" ? "password" : "text";
  input.type = newType;
});

* {
  box-sizing: border-box;
}

.input-container {
  position: relative;
  --width: 100px;
  --height: 40px;
  width: var(--width);
  height: var(--height);
}

input {
  width: var(--width);
  height: var(--height);
  border: 1px solid black;
  border-radius: 5px;
}

.show-password {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  border-radius: 50%;
  --size: 2rem;
  width: var(--size);
  height: var(--size);
  
  display: grid;
  place-items: center;
  transition: 0.3s;
  user-select: none;
}


.material-symbols-outlined {
  transition: 0.3s;
}

.show-password:hover .material-symbols-outlined {
  transform: scale(1.2);
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material Symbols Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

<div >
  <input type="text" value="test" />
  <div >
    <div >
      visibility
    </div>
  </div>
</div>