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

Posted 2023-03-05

【中文标题】css的一个输入占位符可以有2种不同的字体大小吗？

【英文标题】：It is possible to have 2 different font sizes in one input placeholder in css?

【发布时间】：2017-05-12 16:36:47

【问题描述】：

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

类似这样的设计：

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

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

谢谢

【问题讨论】：

这有帮助吗？ ***.com/a/22416088/5561605

感谢@ovokuro，但我担心这不是这种情况下的解决方案，因为我正在使用一些 WordPress 表单生成器 - 所以我不能使用这个 HTML - 只有一个真正的输入占位符

我认为您想要的并不容易。理想情况下，您可以使用 ::-webkit-input-placeholder::after content: "TEXT"; font-size: "20px"; -- 但我认为伪元素不会在大多数浏览器中用于占位符

是的 - 此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且未来的行为可能会发生变化。

这里真正涉及的html是什么？输入但是，还有什么？它是包裹在标签、p、div 中，还是只是以某种形式站在其他人中间？请发布您的完整 HTML

【参考方案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>

【讨论】：

谢谢，@nashcheez - 这看起来很棒，我相信我会在其他情况下使用它 - 但在这里我使用一些 WordPress 表单生成器 - 所以我不能使用这个 HTML - 只有一个真正的输入占位符

@ErezLieberman 很抱歉，但我想以您想要的方式修改占位符本身是不可能的。

【参考方案2】：

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>

【讨论】：

谢谢，@dream Hunter - 这里我使用了一些 WordPress 表单生成器 - 所以我不能使用这个 HTML - 只有一个真正的输入占位符