[英]Red asterisk after ng-required input (without label)
I'm looking for a CSS rule to apply a red asterisk after the inputs with the ng-required
attribute.我正在寻找一个 CSS 规则,以在具有ng-required
属性的输入之后应用红色星号。
The thing is, there is no label on those inputs, the placeholder is used as a label.问题是,这些输入上没有标签,占位符用作标签。
Those 2 inputs for instance :例如,这 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>
So I tried to play with :after
but without success.所以我试着玩:after
但没有成功。 Also, the :required
only apply to the required
attribute, not ng-required
.此外, :required
仅适用于required
属性,而不适用于ng-required
。
I tried CSS, and the selector does not seem to work at all for input elements while it will work for a div element.我尝试过 CSS,但选择器似乎对输入元素根本不起作用,而对 div 元素却起作用。 You can try the following, and you will see that the asterisk is inserted after the div
and not after the input
:您可以尝试以下操作,您将看到星号插入在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: CSS:
[ng-required]:after {
content: "*"
}
OUTPUT:输出:
Jsfiddle live example of problem Jsfiddle 问题的现场示例
In my opinion this is a job for javascript.在我看来,这是 javascript 的工作。 With your html, this code will work (native JS):使用您的 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>');
}
}
This way works for me, isn't all clean I want, but here goes:这种方式对我有用,不是我想要的全部干净,但这里是:
I wrap the element into a <span>
with a class="obligatorio"
.我将元素包装成一个带有class="obligatorio"
的<span>
。 Then getting all them by ClassName, appending it a div
with absolute position, "*" content => textNode
and other item class properties.然后通过 ClassName 获取所有它们,附加一个具有绝对位置的div
,“*” content => textNode
和其他项目类属性。
So, I put an element over de fiels...所以,我在 de fiels 上放了一个元素......
HTML HTML
<span class="obligatorio"><input type="date" name="ingreso"></span>
<span class="obligatorio"><input type="time" name="lavIn"></span>
CSS 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 Vanilla 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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.