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

каков хороший способ преодолеть тот прискорбный факт, что этот код не будет работать так, как хотелось бы:

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

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

в идеальном мире, все необходимые inputs получит маленькую звездочку, указывающую, что поле является обязательным. Это решение невозможно, так как CSS вставляется после содержимого элемента, а не после самого элемента, но что-то вроде этого было бы идеально. На сайте с тысячами обязательных полей я могу переместить звездочку перед входом с одним изменением в одну строку (:after до :before) или я могу переместить его в конец ярлыка (.required label:after) или лицевой стороне этикетки, или на позицию в поле и т. д...

Это важно не только на случай, если я передумаю о том, где разместить звездочку везде, но и для нечетных случаев, когда макет формы не позволяет Звездочке в стандартном положении. Он также хорошо играет с проверкой, которая проверяет форму или выделяет неправильно заполненные контроли.

наконец, он не добавляет дополнительной разметки.

есть ли хорошие решения, которые имеют все или большинство преимуществ невозможен код?

14 83
forms css web-standards validation

14 ответов:

хотя это принятый ответ,пожалуйста игнорируйте меня и используйте :after синтаксис, предложенные ниже. Мое решение не работает.

аналогичный результат может быть достигнут с помощью фонового изображения Изображения звездочки и установки фона метки/ввода/внешнего div и заполнения размера изображения звездочки. Что-то вроде этого:

.required input {
   padding-right: 25px;
   background-image: url(...);
   background-position: right top;
}

это поставит звездочку Внутри текстового поля, но положить то же самое на div.required вместо .required input вероятно, будет больше, что вы ищете, если немного менее элегантно.

этот метод не требует дополнительного ввода.

32

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

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

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

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

57

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

enter image description here

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

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

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

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

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

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

enter image description here

и выглядит это так: enter image description here

10

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

используйте 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>
5

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

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

.asterisc {
  display: block;
  color: red;
  margin: -19px 185px;
}
<input style="width:200px">
<span class="asterisc">*</span>
1

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

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

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

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

0

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

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

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

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

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

быстрая hack применить ко всем метки

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