label {  display: block;  margin-top: 1em;}input:placeholder-shown {  background-color: ivory;  border: 2px solid darkorange;  border-radius: 5px;}

<form>  <label for="name">Full Name:</label>  <input name="name" type="text" />  <label for="email">Email Address:</label>  <input name="email" type="email" placeholder="name@example.com" />  <label for="age">Your age:</label>  <input       name="age"    type="number"    value="18"    placeholder="You must be 18+" /></form>

:placeholder-shown {  /* ... */}

<input placeholder="아무 내용이나 입력하세요!" />

input {  border: 1px solid black;  padding: 3px;}input:placeholder-shown {  border-color: teal;  color: purple;  font-style: italic;}

<input placeholder="이름, 등급 그리고 일련번호" /> <br /><br /><input placeholder="이름, 등급 그리고 일련번호" />

#input2:placeholder-shown {  text-overflow: ellipsis;}

<form>  <p>    <label for="name">학생 이름을 입력하세요:</label>    <input placeholder="학생 이름" />  </p>  <p>    <label for="branch">학생부를 입력하세요:</label>    <input placeholder="학생부" />  </p>  <p>    <label for="sid">학생 고유번호를 입력하세요:</label>    <input      type="number"      pattern="[0-9]{8}"      title="8 digit ID"                placeholder="8자리 고유번호" />  </p>  <input type="submit" /></form>

input {  background-color: #e8e8e8;  color: black;}input.studentid:placeholder-shown {  background-color: yellow;  color: red;  font-style: italic;}

Help improve MDN

This page was last modified on2025년 12월 4일 byMDN contributors.