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>
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
아래의 내용을 한번 참고해 보시겠어요..
<!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>
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
안으로 넣을 수는 없는건가요?