Требуются * символы, жестко закодированные в HTML-код или добавленные динамически, используя back-end только для обязательных полей? [Дубликат]

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

Исправить вашу точную структуру: http://jsfiddle.net/bQ859/

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

http://jsfiddle.net/erqrN/1/

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

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

Вставить его точно в INTO, как показано на следующем изображении:

[/g0]

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

.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> 

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

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

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

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

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

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

http://jsfiddle.net/SpzTP/1/

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

В fiddle Я включаю возможность поместить «*» после ввода или после метки.

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

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

Использовать 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>

записать в 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;
}

быстрый взломать для всех ярлыков

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

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

Изображение имеет пробел 20px справа, чтобы не накладываться с помощью стрелки выпадающего выделения

[/g0]

И это выглядит так: [/g1]

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

    <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>