Question

<div class="form-group form-group-lg">
    <label class="col-md-2 control-label">{{translation.FIRST_NAME}}:</label>
    <div class="col-md-10 required">
        <input type="text" name="firstName" class="form-control" ng-model="Addressid.nameFirst" ng-minlength="3" placeholder="First Name" required>
        <div ng-messages="rmaForm.firstName.$error">
            <div ng-message="required">
                Please enter your first name
            </div>
        </div>
    </div>
</div>

CSS

.required:after { content:" *"; }

问题

我知道如何在标签后获得星号，但我希望它在输入字段之后。目前它是在第二个div中的错误消息之后。使用CSS可以在输入字段后得到它吗？

Answer 1

怎么样？
.required input:after { content: " *"; }

<击>

刚才意识到你不能在输入字段上添加后续内容。最好的方法是跨度，甚至可以通过javascript在每个.required字段添加：

$('.required input').after('<span class="asterisk">*</span>');

这会使任务自动化，这可能会派上用场

Answer 2

您可以这样做，例如

.required:after {
  content: " *";
  position: absolute;
  top: 30px;
  left: 190px;
}

（demo）

或者您只需在输入后添加新的span并将星号放入：

<input type="text" name="firstName" class="form-control" ng-model="Addressid.nameFirst" ng-minlength="3" placeholder="First Name" required>
<span class="required-field">*</span>

Answer 3

这就是你想要的DEMO

.required:after {
  content: " *";
  position: absolute;
  top: 0px;
  right: 6px;
}

使用Bootsrap 3和AngularJS在输入字段后添加星号

3 个答案: