html - 在 css 的一个输入占位符中可以有 2 种不同的字体大小吗？

Question

是否可以在 CSS 中的一个输入占位符中使用 2 种不同的字体大小？

类似这样的设计:

在常规 html 中，您可以使用 span、:before、&:after 等来实现。

但是在输入中你不能做所有这些事情所以我想了解它是否可能...

谢谢

Answer 1

不可能在同一个占位符中应用不同的样式。

然而，您可以做的是使用伪元素或充当占位符的 div，并在输入聚焦时隐藏/显示它。

这可能有帮助:

$("#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>