Используйте CSS для автоматического добавления звездочки "Обязательное поле" для формирования входных данных

Это то, что вы имели в виду?

Http://jsfiddle.net/erqrN/1/

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required:after { content:" *"; }
</style>

См. https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements

.required label {
    font-weight: bold;
}
.required label:after {
    color: #e32;
    content: ' *';
    display:inline;
}

Возитесь со своей точной структурой: http://jsfiddle.net/bQ859/

Поместить его точно во вход, как показано на следующем рисунке:

Я нашел следующий подход:

.asterisk_input:after {
content:" *"; 
color: #e32;
position: absolute; 
margin: 0px 0px 0px -20px; 
font-size: xx-large; 
padding: 0 5px 0 0; }


 <form>
    <div>              
        <input type="text" size="15" />                                 
        <span class="asterisk_input">  </span>            
    </div>            
</form> 

Сайт, на котором я работаю, закодирован с использованием фиксированной компоновки, поэтому для меня это было нормально.

Я не уверен, что это хорошо для жидкостного дизайна.

input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
}

Изображение имеет некоторое 20px пространство справа, чтобы не перекрываться с select dropdown arrow

И выглядит это так:

Запись в CSS

.form-group.required .control-label:after {content:"*";color:red;}

И HTML

<div class="form-group required">

    <label class="control-label">Name:</label>

    <input type="text">

</div>

input[required]{
    background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
    background-size: 1em 1em;
    background-position: right top;
    background-repeat: no-repeat;
}

Используйте jQuery и CSS

jQuery(document).ready(function() {
 jQuery("[required]").after("<span class='required'>*</span>");
});

.required {
    position: absolute;
    margin-left: -10px;
    color: #FB0000;
    font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="xxx" required>

Я думаю, что это эффективный способ сделать, почему так много головной боли

    <div class="full-row">
     <label for="email-id">Email Address<span style="color:red">*</span></label>
  <input type="email" id="email-id" name="email-id"  ng-model="user.email" >
    </div> 

.asterisc {
  display: block;
  color: red;
  margin: -19px 185px;
}

<input style="width:200px">
<span class="asterisc">*</span>

Вы также можете использовать абсолютное позиционирование...

Http://jsfiddle.net/SpzTP/1/

.required {
  display: inline-block;
  position: relative;
}
.required label:after {
  content:"*";
  display: block;
  position: absolute;
  right: -.6em;
  top: 0;
}

В скрипке я включаю опцию для размещения ' * ' после ввода или после метки.

Вы можете достичь желаемого результата, инкапсулировав HTML-код в тег div, который содержит класс "required", за которым следует класс "form-group". *однако это работает только в том случае, если у вас есть Bootstrap.

<div class="form-group required">
    <div class="required">
        <label>Name:</label>
        <input type="text">
    </div>
  <div>

Для тех, кто заканчивает здесь, но имеет jQuery:

// javascript / jQuery
$("label.required").append('<span class="red-star"> *</span>')

// css
.red-star { color: red; }

Быстро Взломать, чтобы применить ко всем меткам

function showRequiredAsterisk() {
    $(':required').each(
        function(f){
            var lbl = $('label[for="'+this.id+'"]').first();
            if(lbl!=null){
                if(!lbl.text().includes('*')){
                    lbl.html(lbl.html() + '<span style="color:red"> * </span>');
                }
            }
        });
    return false;
}

$(document).ready(function () {
    showRequiredAsterisk();
});