반응형
CSS에서 한 입력 자리 표시자에 두 가지 다른 글꼴 크기를 가질 수 있습니까?
CSS에서 한 입력 자리 표시자에 서로 다른 두 가지 글꼴 크기를 가질 수 있습니까?
이 디자인과 같은 것:
일반 html에서는 span,:before,&:after 등으로 만들 수 있습니다.
하지만 입력으로 이 모든 것을 만들 수는 없기 때문에 가능한지 알고 싶습니다.
감사해요.
동일한 자리 표시자에 다른 스타일을 적용할 수 없습니다.
그러나 사용자가 수행할 수 있는 작업은 의사 요소 또는 자리 표시자로 동작하는 디바를 사용하고 입력이 포커스될 때 숨김/표시하는 것입니다.
이를 통해 다음과 같은 이점이 있습니다.
$("#input").keyup(function() {
if ($(this).val().length) {
$(this).next('.placeholder').hide();
} else {
$(this).next('.placeholder').show();
}
});
$(".placeholder").click(function() {
$(this).prev().focus();
});
.placeholder {
position: absolute;
margin: 7px 8px;
color: #A3A3A3;
cursor: auto;
font-size: 14px;
top: 7px;
}
.small {
font-size: 10px;
}
input {
padding: 5px;
font-size: 11pt;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" type="text" />
<div class="placeholder">Email <span class="small">address</span>
</div>
CSS 전용 솔루션
.input-field {
position: relative;
display: inline-block;
}
.input-field > label {
position: absolute;
left: 0.5em;
top: 50%;
margin-top: -0.5em;
opacity: 1;
display: none;
}
.input-field > input[type=text]:placeholder-shown + label {
display: block;
}
.input-field > label > span {
letter-spacing: -2px;
}
.first-letter {
color: red;
font-size:100%;
}
.second-letter {
color: blue;
font-size:50%;
}
.third-letter {
color: orange;
font-size:75%;
}
.fourth-letter {
color: green;
font-size:100%;
}
.fifth-letter {
color: yellow;
font-size:25%;
}
<div class="input-field">
<input id="input-text-field" type="text" placeholder=" "></input>
<label for="input-text-field">
<span class="first-letter">H</span>
<span class="second-letter">E</span>
<span class="third-letter">L</span>
<span class="fourth-letter">L</span>
<span class="fifth-letter">O</span>
</label>
</div>
JS해
addListenerMulti(document.getElementById('input-text-field'), 'focus keyup', blurme);
function blurme(e) {
var element = e.currentTarget;
element.classList[(element.value.length !== 0) ? "add" : "remove"]('hide-placeholder');
}
function addListenerMulti(el, s, fn) {
s.split(" ").forEach(function(e) {
return el.addEventListener(e, fn, false)
});
}
.input-field {
position: relative;
display: inline-block;
}
.input-field > label {
position: absolute;
left: 0.5em;
top: 50%;
margin-top: -0.5em;
}
.hide-placeholder + label {
display: none;
}
.input-field > label > span {
letter-spacing: -2px;
}
.first-letter {
color: red;
font-size:100%;
}
.second-letter {
color: blue;
font-size:100%;
}
.third-letter {
color: orange;
font-size:100%;
}
.fourth-letter {
color: green;
font-size:50%;
}
.fifth-letter {
color: black;
font-size:50%;
}
<div class="input-field">
<input id="input-text-field" type="text">
<label for="input-text-field">
<span class="first-letter">H</span>
<span class="second-letter">E</span>
<span class="third-letter">L</span>
<span class="fourth-letter">L</span>
<span class="fifth-letter">O</span>
</label>
</div>
언급URL : https://stackoverflow.com/questions/41361294/it-is-possible-to-have-2-different-font-sizes-in-one-input-placeholder-in-css
반응형
'programing' 카테고리의 다른 글
jQuery로 모든 체크박스를 선택하는 방법은? (0) | 2023.10.29 |
---|---|
EPLus를 사용하여 .xls 파일을 읽으려고 할 때 오류가 발생했습니다. (0) | 2023.10.29 |
jQuery가 ID에 .(주기)가 있는 요소를 선택하도록 하려면 어떻게 해야 합니까? (0) | 2023.10.29 |
C#와 유사한 자바스크립트의 포맷 번호 (0) | 2023.10.29 |
대괄호 자바스크립트 객체 키 (0) | 2023.10.29 |