Question

如何在标签旁边显示（*）仅用于输入必填字段..？在我的情况下，required不是一个班级。？

我试过这样但没有工作

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用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 2

你可以这样做：

＆＃13;

.wrapper > div{
  display: flex;
  flex-direction: column-reverse;
}

input:required + label::before{
  content: "* "
}

＆＃13;

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

＆＃13;

http://jsfiddle.net/zbe1k4ay/

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>

除标签外如何显示（*）仅用于输入所需的...？

3 个答案: