使用glyphicon用css标记必填字段

Question

在我们的Angularjs应用程序中,我们动态设置所需的字段(ng-required).因此,*每次需要时向标签添加都非常复杂.

现在我们有了另一个想法.可以根据需要标记输入字段本身.在这篇文章中,我们找到了解决方案的一部分.

有一个必需字段的CSS选择器,所以我们可以像这样为它设置一个背景图像:

input:required:valid {
  background-image: url(valid.png);
  background-position: right center;
  background-repeat: no-repeat;
}
input:required:invalid {
  background-image: url(invalid.png);
  background-position: right center;
  background-repeat: no-repeat;
  -moz-box-shadow: none;
}

<p>Name:</p>
<input type="text" name="name" required />

但是使用这种方式,我们需要一个背景图像*,这似乎非常hacky.特别是,如果表格有不同的尺寸,那么图像有不同的分辨率.

比我们找到这个(Section Labeled)示例,似乎可以将Text添加到输入字段.

所以问题是,如何将所有这些放在一起,以便我可以将一个glyphicon从twitter-bootstrap放到输入字段的右侧,如果需要,而不编辑所有表单？

她是一个小伙伴.可能的工作,但问题是,这样的背景下,大小是不支持无处不在.

Answer 1

选项1

正如Angularjs中所要求的星号所述,您可以为所需属性添加指令,如下所示:

var app = angular.module('stack', []);

app.directive("required", function() {
    return {
        restrict: 'A', // only for attributes
        compile: function(element) {
            // insert asterisk after elment 
            element.after("<span class='required'>*</span>");
        }
    };
});

.required {
  color: red;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.js"></script>

<div ng-app="stack">
  
  <input type="text" required />
  
</div>

选项2

正如在使用CSS中自动添加"必填字段"星号来形成输入一样,使用背景图像也非常好:

input[required], 
select[required]{
    background-image: url('http://i.imgur.com/zEIWMh4.png');
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 45px;
}

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

注意:您不能使用input:after创建输入后伪元素,因为:before和:after "渲染是容器本身作为一个子元素中并input不能包含其他元素,因此它不支持"