placeholder관련 문의 드립니다
본문
<input type="text" name="wr_17" value="<?php echo $write['wr_17'] ?>" id="wr_17" required class="form-control required" style="width:200px;" placeholder="이름을입력해 주세요">
여기서
placeholder 이부분에 넣고 싶은게
예)
1. 한글이름을 넣어 주세요
2. 영문이름을 넣어 주세요
3. 한자이름을 넣어주세요
줄바꿈해서
이렇게 나타나게 하고 싶은데, 방법이 있을까요? 옆으로만 계속 이어져서 나오는데 다른 방법이 있을까. 고수분들님께 여쭤봅니다~
답변 2
기본은 안되고 커스텀을 해야해서 아래의 코드를 참고해보시겠어요..
<!DOCTYPE html>
<html>
<head>
<style>
.placeholder-custom {
position: absolute;
pointer-events: none;
opacity: 0.5;
color: #999;
font-size: 14px;
margin: 5px 0 0 5px;
}
.form-control:focus + .placeholder-custom,
.form-control:not(:placeholder-shown) + .placeholder-custom {
display: none;
}
.form-container {
position: relative;
width: 200px;
}
</style>
</head>
<body>
<div class="form-container">
<input type="text" name="wr_17" id="wr_17" class="form-control" style="width:100%;" placeholder=" " required>
<div class="placeholder-custom">
1. 한글이름을 넣어 주세요<br>
2. 영문이름을 넣어 주세요<br>
3. 한자이름을 넣어주세요
</div>
</div>
</body>
</html>
좋은 답변 감사합니다. 한가지 좀 더 여쭤 보고 싶은게, input 박스 아래쪽에 나타나는데, 혹시 박스
안으로 넣을 수는 없는건가요?
아래의 내용을 한번 참고해 보시겠어요..
<!DOCTYPE html>
<html>
<head>
<style>
.form-container {
position: relative;
width: 200px;
}
.form-control {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.placeholder-custom {
position: absolute;
pointer-events: none;
opacity: 0.5;
color: #999;
font-size: 14px;
top: 50%;
left: 10px;
transform: translateY(-50%);
transition: 0.2s ease;
}
.form-control:focus + .placeholder-custom,
.form-control:not(:placeholder-shown) + .placeholder-custom {
top: 10px;
left: 10px;
font-size: 12px;
opacity: 1;
}
</style>
</head>
<body>
<div class="form-container">
<input type="text" name="wr_17" id="wr_17" class="form-control" placeholder=" " required>
<div class="placeholder-custom">
1. 한글이름을 넣어 주세요<br>
2. 영문이름을 넣어 주세요<br>
3. 한자이름을 넣어주세요
</div>
</div>
</body>
</html>