Красная звездочка после ввода ng-запроса (без метки)

Я ищу правило CSS для применения красной звездочки после входов с атрибутом ng-required.Красная звездочка после ввода ng-запроса (без метки)

Дело в том, что на этих входах нет ярлыков, в качестве метки используется заполнитель.

Эти 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.

источник

2016-09-22 Ellone

Возможный дубликат [Могу ли я использовать: после псевдо-элемента на поле ввода] (HTTP: // StackOverflow. com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-field-field) –

Проверьте это http://stackoverflow.com/questions/2587669/can-i-use-the -after-pseudo-element-on-an-field-field В нем объясняется причина, по которой вы не можете сделать это на элементах ввода, также есть несколько идей о том, как их можно использовать, добавляя дополнительные элементы, но вы будете иметь для создания вашей директивы или расширения требуемого ng. –

Я пробовал 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

источник

2016-09-22 09:17:34

Красная звездочка после ввода ng-запроса (без метки)

ответ

Смежные вопросы