lang/html

css input box validate

C/H 2022. 9. 15. 11:27
body {
  margin-top: 1.6em;
}

.form-group {
  position: relative;
  margin: 1em;
}
.form-group .form-control {
}
.form-group .form-control::placeholder {
  opacity: 0;
}
.form-group .form-control + label {
  color: #000;
  position: absolute;
  top: 50%;
  padding: 0.375rem 0.75rem;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}
.form-group .form-control:optional + label {
  color: darkgray;
}
.form-group .form-control:invalid + label {
  color: red;
}
.form-group .form-control:valid + label {
  color: green;
}
.form-group .form-control:not(:placeholder-shown)::placeholder,
.form-group .form-control:focus::placeholder {
  opacity: 1;
}
.form-group .form-control:not(:placeholder-shown) + label,
.form-group .form-control:focus + label {
  transform: translateY(-120%);
}
<form>
  <div class="form-group">
    <input type="text" name="userNm" id="userNm" class="form-control" placeholder="User Name" maxlength="20" pattern=".*\S.*" />
    <label for="userNm">User Name</label>
  </div>
  <div class="form-group">
    <input type="text" name="userId" id="userId" class="form-control" placeholder="User Id" maxlength="20" required pattern=".*\S.*" />
    <label for="userId">User Id</label>
  </div>
</form>

See the Pen Checking if an input is empty with CSS by C.H (@uncaose) on CodePen.

See the Pen Checking if an input is empty with CSS - 2nd by C.H (@uncaose) on CodePen.

반응형

'lang > html' 카테고리의 다른 글

html, css tabs menu  (0) 2022.09.24
css input box validate  (0) 2022.09.15
HTML Dialog Tag  (0) 2019.12.12
인터넷 파비콘 이미지 생성및 태그 생성 사이트  (0) 2018.11.27
HTTPS & Referer  (0) 2018.08.09
Referrer Policy, (방문)출처 정책  (0) 2018.08.08