it-swarm.com.ru

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

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

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

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

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

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

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

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

92
brentonstrine

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


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

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

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

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

34
jaypeagi

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

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

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

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

61
laffuste

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

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> 

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

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

21
Tebe

написать в 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>
12
Kondal
input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
}

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

enter image description here

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

10
Toolkit
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
faisal

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

4
Falah

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

2
Vitaly Zdanevich

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

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

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

  1. CSS сетка
  2. CSS переменные
  3. HTML5 элементы формы
  4. SVG в CSS

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

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

Example screenshot

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> в форме, установленной на диапазон 1/-1. Вы изменяете переменные в своих медиазапросах, чтобы у вас на мобильных устройствах появлялись полные поля ввода, как указано выше на рабочем столе. Вы также можете изменить свой разрыв сетки на мобильном устройстве, если хотите, используя подход с переменными CSS.

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

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

0
Henry's Cat