使用 Bootstrap 3 和 AngularJS 在输入字段后添加星号答案

【问题标题】：Adding asterisk after input field using Bootsrap 3 and AngularJS使用 Bootstrap 3 和 AngularJS 在输入字段后添加星号
【发布时间】：2015-08-09 11:38:58
【问题描述】：

<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 在输入字段之后获取？

【问题讨论】：

可能重复 - stackoverflow.com/questions/11197671/…
我的问题是第一个 div 里面还有另一个 div，所以星号在后面，我不想要那个。所以这部分是重复的，部分不是。
这就是我将其链接为可能副本的原因。如果我真的投票决定关闭它，它就会被“砸金币”并关闭。
对不起，我的错误:)

标签： html css angularjs

【解决方案1】：

例如，您可以这样做

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

【讨论】：

您的 html 方法的问题是 * 显示在下一行

【解决方案2】：

~~怎么样~~

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

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

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

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

【讨论】：

【解决方案3】：

这就是你想要的DEMO

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

【讨论】：

但在我的情况下，第一个 div 里面还有另一个 div，所以这不起作用。