除了需要输入的标签之外，如何显示 (*) ..？

Question

如何仅在输入必填字段时在标签旁边显示 (*)？ required 在我的例子中不是 class..?

我试过这样但没用

input[required] label:after { content:" (*)";color:red; }

<div>
    <label>Name:</label><br>
    <input type="text" name="name" required>
</div>
    

<br>

<div>
    <label>Address:</label><br>
    <input type="text" name="address" >
</div>

Answer 1

你可以这样做：

.wrapper > div{
  display: flex;
  flex-direction: column-reverse;
}

input:required + label::before{
  content: "* "
}

<div class="wrapper">
<div>
    <input type="text" name="name" required>
    <label>Name:</label><br>
</div>

<div>
    <input type="text" name="address" >
    <label>Address:</label><br>
</div>
</div>

http://jsfiddle.net/zbe1k4ay/

Answer 2

您可以使用 jQuery 做到这一点，这样您就不需要更改您的标记。所以在页面加载后你可以这样做

$('input[required]').prev('label').append('*');

要自定义星号，您可以这样做：

$('input[required]').prev('label').append('<font class="requiredAsterisk">*</font>');

/* And customize it in your CSS */
font.requiredAsterisk{
    color: red;
}

Answer 3

试试这个。

jQuery("[required]").prev('label').append("<span>*</span>");

label{
  display:block;
}
label span{
  color:#ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <label>Name:</label>
    <input type="text" name="name" required>
</div>
<br/>
<div>
    <label>Address:</label>
    <input type="text" name="address" >
</div>

除了需要输入的标签之外，如何显示 (*) ..？

How can show (*) besides the label only for input required..?

html

javascript

css

required