红色必填标志该着么实现便捷？

Question

Answer 1

蟹妖

http://codepen.io/ThomasOzil/...

Answer 2

一般这种都是使用before实现的吧

类似于

.form-item.is-required .form-item__label:before {
    content: "*";
    color: #ff4949;
    margin-right: 4px;
}

Answer 3

对于当前的CSS来说，这个需求无法用单纯的input来解决，下面是个比较简单的实现

http://jsbin.com/pegayafude/e...

<div class="input required">
  <input type="text" required>
  <span class="placeholder">
    <sup class="required-flag">*</sup>文字
  </span>
</div>

.input {
  border: 1px solid #666;
  display: inline-block;
  position: relative;
}

.input input {
  border: none;
  background-color: #fff;
}

.input input:focus+.placeholder,
.input input:valid+.placeholder {
  display: none;
}

.input .placeholder {
  color: #999;
  pointer-events: none;
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
}

.input .required-flag {
  color: #f00;
  padding: 0 3px;
}

未来版本有了placeholder伪元素选择器之后可能会有更简单的实现