Как разместить мой ярлык над вводом текстового поля?

Question

У меня есть приведенный ниже код для создания формы входа в систему, но я не могу получить метку флажка, как всегда, напротив края текстовой области. Я всегда сижу справа от текстовой области. Я не могу заставить его зависеть от div, в котором он находится. При осмотре он находится вне div.

Разные вещи, которые я пробовал, включали присвоение метке левого значения, но это портит его при изменении размера экрана.

Я хочу что-то вроде этого

Вот jsfiddle, если это проще

function showHidePassword() {
  var x = document.getElementById("pass");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

body {

  background-color: #ffffff;
}

* {
  box-sizing: border-box;
}

input[type=text],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

input[type=password],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}



label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container1 {
  border-radius: 25px;
  background-color: #f2f2f2;
  padding: 40px;
  position: center;
  margin: 15% 30%;
}



.signup {
  border-radius: 25px;
  background-color: #f2f2f2;
  padding: 40px;
  position: center;
  opacity: 0.96;
}

.container1 .new-body {
  background: #f2f2f2;
}

.signup .new-body {
  background: #f2f2f2;
}

.signup .row {
  padding-top: 5px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 65%;
  margin-top: 6px;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .col-25,
  .col-75,
  input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
  .col-70,
  input[type=submit] {
    width: 95%;
    margin-top: 0;
  }
}

.passw {
  cursor: pointer;
  width: 30px;
  height: 20px;
}

.col-75 label {
  padding-top: 16px;
  position: absolute;
  z-index: 100;
}

<form>
  <div class="row">
    <div class="col-25">
      <label for="pass">Password</label>
    </div>
    <div class="col-75">
      <input type="password" id="pass" name="password" minlength="5" pattern="[A-Za-z][A-Za-z0-9]*[0-9][A-Za-z0-9]*" placeholder="Password" title="A valid password is a set of 5 characters, each consisting of an
                           upper or lower-case letter, or a digit. The password must begin with a letter and contain at least one digit" autocomplete="current-password" required>

      <label for="passShowIcon" id="showHide"><input name="passShowIcon"  type="checkbox" class="passw" onclick="showHidePassword();">
                        <span   class="  "></span></label>

    </div>
  </div>
  <div class="row">
    <input type="submit" value="Submit">
  </div>
</form>

Answer 1

Если вы хотите убедиться, что флажок появляется внутри ввода текста. Вы можете обернуть оба поля ввода классом relative, а затем применить absolute позиционирование к флажку.

Примерно так:

https://jsfiddle.net/x0o46g7a/2/

.wrapper {
  position: relative;
}

.text {
  width: 100%;
  height: 100%;
}

.checkbox {
  position: absolute;
  top: -8px;
  right: -8px;
}

Что стоит отметить:

Я бы порекомендовал добавить несколько padding-right к вашему текстовому вводу, чтобы убедиться, что его текст не перекрывается / underlap установленный флажок absolute.

Answer 2

Исходя из вашего кода, добавьте следующие правила в css.

• float: right в .col-75 вместо значения с плавающей запятой
• right: 0 в .col-75 label

это обеспечит сохранение флажка внутри поля ввода.