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

Question

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

像这样的设计：

在普通的html中，你可以使用span，：before，＆amp;：after等等。

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

感谢

Answer 1

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

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

这可能会有所帮助：

＆＃13;

＆＃13;

$("#input").keyup(function() {
  if ($(this).val().length) {
    $(this).next('.placeholder').hide();
  } else {
    $(this).next('.placeholder').show();
  }
});
$(".placeholder").click(function() {
  $(this).prev().focus();
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

CSS 仅限解决方案

var companyField = $("input[name$='field_company']");
for (var i;i<companyField.length;i++) {
    var companyValue = companyField[i].val();
    company.push(companyValue);
}

var fromField = $("input[name$='field_from']");
for (var i;i<fromField.length;i++) {
    var fieldValue = fromField[i].val();
    from.push(fieldValue);
}

var toField = $("input[name$='field_to']");
for (var i;i<toField.length;i++) {
    var toValue = toField[i].val();
    to.push(toValue);
}

var yearField = $("input[name$='field_year']");
for (var i;i<yearField.length;i++) {
    var yearValue = yearField[i].val();
    year.push(yearValue);
}

.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%;
}

JS 解决方案

<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>

    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%;
    }