使用ExtJS和CSS在占位符中为星号应用红色

Question

我需要在文本字段的占位符中设置红色*，表示该字段必须填写。我使用ExtJS和CSS。

Answer 1

css或placeholder属性无法实现...您需要通过为span等占位符文本创建元素并将其设置为占位符...

此外，您需要一些jQuery来检查输入是否为空，以便只显示或隐藏占位符文本

＆＃13;

＆＃13;

$(".input-control input").on("blur input", function() {
  if ($(this).val() != "") {
    $(this).next(".placeholder").hide();
  } else {
    $(this).next(".placeholder").show();
  }
})

＆＃13;

.input-control {
  position: relative;
  font: 13px Verdana;
}

.input-control input {
  width: 200px;
  height: 30px;
  padding: 0 10px;
}

.input-control .placeholder {
  position: absolute;
  left: 12px;
  line-height: 30px;
  color: #bbb;
  top: 0;
  pointer-events: none;
}

.input-control .placeholder sup {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-control">
  <input type="text">
  <span class="placeholder">User Id<sup>*</sup></span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

不幸的是，默认情况下无法设置占位符文本的不同部分...

您当然可以使用::placeholder属性将一种样式应用于占位符文本：

Docs

但是，有一种方法可以获得支持大多数浏览器的功能。没有通用的方法可以轻松地做你想做的事情所以这可能是一个长镜头...只要你不需要支持旧的IE浏览器，你应该可以采用以下方法：< / p>

input::-webkit-input-placeholder:after {
    content: " *";
    color: red;
}

input:-moz-placeholder:after {
    content: " *";
    color: red;  
}

input:-ms-input-placeholder:after {  
    content: " *";
    color: red;  
}