ng-required 输入后的红色星号（无标签）

Question

我正在寻找 CSS 规则以在具有 ng-required 属性的输入后应用红色星号。

问题是，这些输入没有标签，占位符用作标签。

例如这 2 个输入：

<div class="row">
    <div class="col-xs-6">
        <input type="text" name="CACLastName" ng-model="cac.lastName" placeholder="NOM" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/>
    </div>
    <div class="col-xs-6">
        <input type="text" name="CACFirstName" ng-model="cac.firstName" placeholder="Prénom" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/>
    </div>
</div>

所以我试着玩 :after 但没有成功。此外，:required 仅适用于 required 属性，不适用于 ng-required。

Answer 1

我试过 CSS，选择器似乎对输入元素根本不起作用，但它对 div 元素有效。您可以尝试以下操作，您会看到星号插入在 div 之后而不是 input 之后：

<div class="row">
    <div class="col-xs-6">
        <input type="text" name="CACLastName" ng-model="cac.lastName" placeholder="NOM" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/>
    </div>
    <div class="col-xs-6">
        <input type="text" name="CACirstName" ng-model="cac.firstName" placeholder="Prénom" ng-required="true" ng-disabled="$parent.isDisabled" class="form-control"/>
    </div>
</div>

<div class="text-div" ng-required="true">
  TEST DIV LOOK -->
</div>

CSS:

[ng-required]:after {
  content: "*"
}

输出：

Jsfiddle live example of problem

在我看来，这是 javascript 的工作。使用您的 html，此代码将起作用（本机 JS）：

var form_inputs = document.getElementsByClassName('form-control')

for ( var i = 0; i < form_inputs.length; i ++ ) {
    if ( form_inputs[i].hasAttribute('ng-required') ) {
    form_inputs[i].insertAdjacentHTML('afterend', '<span style='color: red;'>*</span>');
  }
}

Jsfiddle solution

Answer 2

这种方式适合我，不是我想要的一切干净，但这里是：

我将元素包装成 <span> 和 class="obligatorio"。然后通过 ClassName 获取所有它们，附加一个 div 和绝对位置，“*”内容 => textNode 和其他项目 class 属性。

所以，我在 de fiels 上放置了一个元素...

HTML

<span class="obligatorio"><input type="date" name="ingreso"></span>
<span class="obligatorio"><input type="time" name="lavIn"></span>

CSS

.obligatorio {
  position:relative;
}

.obligatorioItem {
  color: red;
  font-weight: 800;
  font-size: 12px;
  position: absolute;
  top:2px;
  left: 5px;
  padding: 0;
  margin: 0;
  z-index: 100;
}

Javascript香草

var obligatorio = document.getElementsByClassName("obligatorio");

for (const element of obligatorio) {
    console.log(element);
    const nodo = document.createElement("div");
    nodo.classList.add("obligatorioItem");
    const texto = document.createTextNode("*");
    nodo.appendChild(texto);
    console.log("elemento:", element);
    element.appendChild(nodo);
}

ng-required 输入后的红色星号（无标签）

Red asterisk after ng-required input (without label)

html

css

required

angularjs

ng-required