Red asterisk after ng-required input (without label)

Question

I'm looking for a CSS rule to apply a red asterisk after the inputs with the ng-required attribute.

The thing is, there is no label on those inputs, the placeholder is used as a label.

Those 2 inputs for instance :

<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. Also, the :required only apply to the required attribute, not ng-required.

Possible duplicate of [Can I use the :after pseudo-element on an input field?](http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field) — Diana R, Sep 22 '16 at 08:36
Check this http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field It explains the reason why you can't do it on input elements, also there are a few ideas on how to wchieve it by adding additional elements, but you will have to crate your directive, or extend the ng-required. — Diana R, Sep 22 '16 at 08:36

score 1 · Accepted Answer · edited Sep 23 '16 at 11:21

I tried CSS, and the selector does not seem to work at all for input elements while it will work for a div element. You can try the following, and you will see that the asterisk is inserted after the div and not after the 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: "*"
}

OUTPUT:

Jsfiddle live example of problem

In my opinion this is a job for javascript. With your html, this code will work (native 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

score 0 · Answer 2 · answered Jan 07 '22 at 00:13

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". Then getting all them by ClassName, appending it a div with absolute position, "*" content => textNode and other item class properties.

So, I put an element over 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 Vanilla

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

Red asterisk after ng-required input (without label)

2 Answers2