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

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

.required input:after { content:"*"; }

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

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

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

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

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


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

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

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

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

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

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

     

    см. 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/

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

    введите описание изображения здесь

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

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

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

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

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

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

    введите описание изображения здесь

    И это выглядит так: введите описание изображения здесь

    писать в CSS

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

    и HTML

     
     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("*"); }); 
     .required { position: absolute; margin-left: -10px; color: #FB0000; font-size: 15px; } 
       

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

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

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

    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, который содержит «необходимый» class, за которым следует class «группа форм». * Однако это работает, только если у вас есть Bootstrap.

     

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

     // javascript / jQuery $("label.required").append(' *') // 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() + ' * '); } } }); return false; } $(document).ready(function () { showRequiredAsterisk(); }); в function showRequiredAsterisk() { $(':required').each( function(f){ var lbl = $('label[for="'+this.id+'"]').first(); if(lbl!=null){ if(!lbl.text().includes('*')){ lbl.html(lbl.html() + ' * '); } } }); return false; } $(document).ready(function () { showRequiredAsterisk(); }); 
    Interesting Posts

    Как работает удаленная программа, например Team Viewer?

    Есть ли стандарт для хранения нормализованных номеров телефонов в базе данных?

    Возможна ли инъекция через динамический LINQ?

    Удалите только свободное место на жестком диске

    jQuery модальный диалог и jqGrid

    Передача аргументов в osascript через функцию оболочки в OS X Mountain Lion

    Использование простого инжектора с шаблоном работы и репозитория в форме Windows

    извлекать данные из файла журнала в указанный промежуток времени

    Как сохранить состояние управления в элементах табуляции в TabControl

    Как восстановить отсутствующую адресную строку проводника Windows?

    1 модем соединяется с 2 устройствами, может ли он в той же сети?

    Как определить, подписан ли пользователь Firebase с использованием аутентификации facebook

    Как массивы на C # частично реализуют IList ?

    Ищете способ сделать сетку на экране, чтобы помочь расположить элементы

    Преобразование VB6 в VB.net

    Давайте будем гением компьютера.