使用 glyphicon 和 css 来标记必填字段

13 浏览
0 Comments

使用 glyphicon 和 css 来标记必填字段

在我们的Angularjs应用程序中，我们动态设置了必填字段（ng-required）。因此，每次需要时，在标签中添加一个*变得非常复杂。\n现在我们有另一个想法。可能将输入字段本身标记为必填项。在这篇文章中，我们找到了部分解决方案。\n有关必填字段的CSS选择器，所以我们可以像这样设置背景图像：\n

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

\n

姓名：

\n但是，使用这种方法，我们需要一个*的背景图像，这似乎非常繁琐。特别是，如果表单的大小不同，那么图像的分辨率也不同。\n然后我们找到了这个（带标签的）示例，似乎可以在输入字段中添加文本。\n因此问题是，如何将所有这些放在一起，以便如果输入字段是必填项，我可以在其右侧添加一个来自Twitter-Bootstrap的图标，而无需编辑所有的表单？\n这里有一个jsFiddle。这可能有效，但问题是，不是每个地方都支持background-size属性。

0

1 答案

0 Comments

使用glyphicon在CSS中标记必填字段的原因是为了在表单中清晰地显示出必填字段，提醒用户填写必要的信息。这样可以增加用户对表单的注意力，减少错误提交的可能性。

解决方法有两种选择：

Option 1：

在AngularJS中添加一个指令来处理必填属性，通过在元素后插入一个带有红色星号的元素来标记必填字段。以下是具体的代码实现：

var app = angular.module('stack', []);
app.directive("required", function() {
    return {
        restrict: 'A', // only for attributes
        compile: function(element) {
            // insert asterisk after element 
            element.after("*");
        }
    };
});

在CSS中定义.required类的样式：

.required {
  color: red;
}

在HTML中使用指令来标记必填字段：

Option 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;
}

在HTML中使用标签和输入框来标记必填字段：

需要注意的是，不能使用input:after来创建伪元素在输入框后面插入星号，因为input元素不能包含其他元素，所以不支持这种方式。

以上就是使用glyphicon在CSS中标记必填字段的原因和解决方法。通过以上方法，可以在表单中清晰地显示出必填字段，提醒用户填写必要的信息，增加用户对表单的注意力，减少错误提交的可能性。

0