<div class="wrapper">
  <label for="pwChecked">&#128065; </label>
  <input type="checkbox" id="pwChecked">
  <input type="text" placeholder="Enter password">
  </div>

body {
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.wrapper {
  position: relative;
 
  input {
    -webkit-text-security: disc;
    border: 1px solid red;
    padding: 0.5rem 2rem;
    border-radius: 10px;
    outline: none;
    font-size: 18px;
  }
   input[type="checkbox"] {
    display: none;
     &:checked ~ input{
        -webkit-text-security: none;
     }
  }
  label{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
  }
}