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

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

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

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

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

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

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

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

Ответ 1

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

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

Ответ 2

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

Скопируйте свою точную структуру: http://jsfiddle.net/bQ859/

Ответ 3

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

Аналогичного результата можно достичь, используя фоновое изображение изображения звездочки и установив фон метки/ввода/внешнего делителя и отступ для размера изображения звездочки. Что-то вроде этого:

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

Это div.required звездочкой ВНУТРИ текстовое поле, но вместо того, .required input, нужно поставить то же самое на div.required а не на .required input, хотя и немного менее элегантно.

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

Ответ 4

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

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

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

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

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

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

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

Ответ 11

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

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

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

В скрипте я включаю опцию поместить "*" после ввода или после метки.

Ответ 12

Вы не должны использовать CSS или фоновые изображения при передаче соответствующей информации пользователям, поскольку они недоступны для пользователей вспомогательных технологий, и тем самым вы фактически исключаете людей, делая вашу форму непригодной для них.

Ответ 13

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

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

Ответ 14

Это 2019 год и предыдущие ответы на эту проблему не используют

CSS сетка
Переменные CSS
HTML5 элементы формы
SVG в CSS

Сетка CSS - это способ создания форм в 2019 году, поскольку ваши метки могут предшествовать вашим вводам, не имея дополнительных элементов div, span, span со звездочками и других реликвий.

Вот куда мы идем с минимальным CSS:

HTML для вышеупомянутого:

<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
    <p class="form-instructions">Please enter the following information to create your account.</p>
    <label for="firstname">First name</label>
    <input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
    <label for="lastname">Last name</label>
    <input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
    <label for="email_address">Email address</label>
    <input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" title="Password" required="">
    <label for="confirmation">Confirm password</label>
    <input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
    <input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
    <label for="is_subscribed">Subscribe to the newsletter</label>
    <input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
    <label for="remember_meGCJiRe0GbJ">Remember me</label>
    <p class="required">* Required</p>
    <button type="submit" title="Register">Register</button>
</form>

Заполнитель текста также может быть добавлен и настоятельно рекомендуется. (Я просто отвечаю на эту среднюю форму).

Теперь для переменных CSS:

--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');

--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
            <path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');

CSS для элементов формы:

input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
    background-image: var(--icon-required);
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: contain;
}

input:valid {
    --icon-required: var(--icon-tick);
}

Сама форма должна быть в сетке CSS:

form {
    align-items: center;
    display: grid;
    grid-gap: var(--form-grid-gap);
    grid-template-columns: var(--form-grid-template-columns);
    margin: auto;
}

Значения для столбцов могут быть установлены на 1fr auto или 1fr с любым, например, тегами <p> в форме, установленной на span 1 / -1. Вы изменяете переменные в своих медиазапросах так, чтобы у вас на мобильных устройствах появлялись полные поля ввода, как указано выше на рабочем столе. Вы также можете изменить свой разрыв сетки на мобильном устройстве, если хотите, используя подход переменных CSS.

Когда поля действительны, вместо звездочки вы должны поставить зеленую галочку.

SVG в CSS - это способ избавить браузер от необходимости совершать поездку в оба конца на сервер, чтобы получить изображение звездочки. Таким образом, вы можете точно настроить звездочки, примеры здесь под необычным углом, вы можете отредактировать это, так как иконка SVG выше полностью читаема. В окно просмотра также можно внести звездочку выше или ниже центра.

Ответ 15

В этом примере символ звездочки ставится перед меткой, чтобы обозначить этот конкретный ввод как обязательное поле. Я установил свойства CSS с помощью% и em, чтобы убедиться, что моя веб-страница отзывчива. Вы можете использовать px или другие абсолютные единицы, если хотите.

#name {
   display: inline-block;
   margin-left: 40%;
   font-size:25px;
    
}
.nameinput{
   margin-left: 10px;
   font-size:90%;
   width: 17em;
   
}

.nameinput::placeholder {
  font-size: 0.7em;
  vertical-align: middle;
}

#name p{
   margin:0;
   border:0;
   padding:0;
   display:inline-block;
   font-size: 40%;
   vertical-align: super;
}

<label id="name" value="name">
<p>*</p> 
Name:  <input class="nameinput" type="text" placeholder="Enter your name" required>
</label>

Ответ 16

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

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

Ответ 17

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

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

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