Girişleri oluşturmak için otomatik olarak 'gerekli alan' yıldız işareti eklemek için CSS kullanın

Bu kodun istendiği gibi çalışmayacağı talihsiz gerçeğinin üstesinden gelmenin iyi bir yolu nedir:

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

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

Kusursuz bir dünyada, gerekli tüm ' inputler, alanın gerekli olduğunu belirten küçük yıldız işaretini alır. CSS, öğenin kendisinden sonra değil, öğe içeriğinden sonra eklendiğinden, bu çözüm imkansızdır, ancak bunun gibi bir şey ideal olacaktır. Binlerce zorunlu alan bulunan bir sitede, yıldız işaretini bir değişiklikle girişin önündeki bir satıra ( :after- :before) veya etiketin sonuna ( .required label:after) veya etiketin önüne taşıyabilirim veya içeren kutudaki bir konum, vb ...

Bu, yalnızca yıldız işaretini her yerde nereye yerleştireceğime dair fikrimi değiştirirsem değil, aynı zamanda form düzeninin yıldız işaretine standart konumda izin vermediği garip durumlar için de önemlidir. Ayrıca, formu kontrol eden veya hatalı şekilde tamamlanmış kontrolleri vurgulayan doğrulama ile de iyi oynar.

Son olarak, ek işaretleme eklemiyor.

İmkansız kodun avantajlarının tümüne veya çoğuna sahip olan herhangi bir iyi çözüm var mı?

Aklından geçen bu muydu?

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

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

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

.required:after {
  content:" *";
  color: red;
}

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

Bkz. Https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements

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

Kesin yapınızla oynayın : http://jsfiddle.net/bQ859/

Kabul edilen cevap bu olsa da, lütfen beni dikkate almayın ve :afteraşağıda önerilen sözdizimini kullanın . Çözümüm erişilebilir değil.

Benzer bir sonuç, bir yıldız işaretinin bir arka plan görüntüsünü kullanarak ve etiket / giriş / dış div'in arka planını ve yıldız imi görüntüsünün boyutunun bir dolgusunu ayarlayarak elde edilebilir. Bunun gibi bir şey:

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

Bu, metin kutusunun İÇİNDE yıldız işaretini koyacaktır, ancak div.requiredbunun yerine aynısını koymak, .required inputbiraz daha az şıksa, muhtemelen aradığınız şeyden daha fazlası olacaktır.

Bu yöntem ek bir girdi gerektirmez.

Aşağıdaki görüntüde gösterildiği gibi tam olarak INTO girişini koymak için:

Aşağıdaki yaklaşımı buldum:

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

Çalıştığım site sabit bir düzen kullanılarak kodlandı, bu yüzden benim için uygun oldu.

Sıvı tasarım için iyi olduğundan emin değilim.

CSS ile yaz

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

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

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

Resmin sağında, seçili açılır okla çakışmaması için 20 piksellik bir alan var

Ve şuna benziyor:

JQuery ve CSS kullanın

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>

Bunu yapmanın etkili yolu olduğunu düşünüyorum, neden bu kadar çok baş ağrısı

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

Yıl 2019 ve bu soruna önceki cevaplar kullanılmıyor

1. CSS ızgarası
2. CSS değişkenleri
3. HTML5 form öğeleri
4. CSS'de SVG

CSS ızgarası, 2019'da formları yapmanın yoludur, çünkü etiketlerinizin fazladan div'ler, aralıklar, yıldız işaretli aralıklar ve diğer kalıntılar olmadan girdilerinizden önce olmasını sağlayabilirsiniz.

İşte minimum CSS ile gittiğimiz yer:

Yukarıdakiler için 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>

Yer tutucu metin de eklenebilir ve şiddetle tavsiye edilir. (Ben sadece bu orta formu yanıtlıyorum).

Şimdi CSS değişkenleri için:

--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>');

Form öğeleri için 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);
}

Formun kendisi CSS ızgarasında olmalıdır:

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

Sütunların değerleri, 1 / -1 kapsamına ayarlanmış formdaki etiketler gibi herhangi bir şeye 1fr autoveya 1frherhangi bir şeye <p>ayarlanabilir. Medya sorgularınızdaki değişkenleri, giriş kutularının mobil cihazlarda tam genişlikte ve yukarıda belirtildiği gibi masaüstünde tam genişlikte olacak şekilde değiştirirsiniz. CSS değişkenleri yaklaşımını kullanarak dilerseniz mobil ağda da ızgara boşluğunuzu değiştirebilirsiniz.

Kutular geçerli olduğunda, yıldız işareti yerine yeşil bir onay işareti almalısınız.

CSS'deki SVG, tarayıcıyı yıldız işaretinin görüntüsünü almak için sunucuya gidiş dönüş yapmaktan kurtarmanın bir yoludur. Bu şekilde yıldız işaretlerine ince ayar yapabilirsiniz, buradaki örnekler alışılmadık bir açıda, yukarıdaki SVG simgesi tamamen okunabilir olduğundan bunu düzenleyebilirsiniz. Görünüm kutusu, yıldız işaretini merkezin üstüne veya altına yerleştirmek için de değiştirilebilir.

Bu örnek, söz konusu girişi zorunlu alan olarak belirtmek için etiketin önüne bir yıldız işareti koyar. Web sayfamın duyarlı olmasını sağlamak için CSS özelliklerini% ve em kullanarak ayarlıyorum. İsterseniz piksel veya diğer mutlak birimleri kullanabilirsiniz.

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

İhtiyacınız olan şey: gerekli seçici - "gerekli" özelliğine sahip tüm alanları seçecektir (bu nedenle, herhangi bir ek sınıf eklemenize gerek yoktur). Sonra - girdileri ihtiyaçlarınıza göre biçimlendirin. ': After' seçiciyi kullanabilir ve diğer cevapların yanı sıra önerilen şekilde yıldız ekleyebilirsiniz.

HTML kodunu "gerekli" sınıfı ve ardından "form-group" sınıfını içeren bir div etiketinde kapsülleyerek istediğiniz sonucu elde edebilirsiniz. * Ancak bu yalnızca Bootstrap'iniz varsa çalışır.

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

Buraya gelip jQuery'ye sahip olanlar için:

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

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