Gunakan CSS untuk secara otomatis menambahkan asterisk 'bidang wajib' untuk membentuk input

Apa cara yang baik untuk mengatasi fakta yang tidak menguntungkan bahwa kode ini tidak akan berfungsi seperti yang diinginkan:

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

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

Di dunia yang sempurna, semua yang diperlukan inputakan mendapatkan tanda bintang kecil yang menunjukkan bahwa bidang tersebut diperlukan. Solusi ini tidak mungkin karena CSS dimasukkan setelah konten elemen, bukan setelah elemen itu sendiri, tetapi sesuatu seperti itu akan ideal. Di situs dengan ribuan bidang yang diperlukan, saya bisa memindahkan tanda bintang di depan input dengan satu perubahan ke satu baris ( :afterke :before) atau saya bisa memindahkannya ke akhir label ( .required label:after) atau di depan label, atau ke posisi pada kotak yang berisi, dll ...

Ini penting bukan hanya jika saya berubah pikiran tentang di mana menempatkan tanda bintang di mana-mana, tetapi juga untuk kasus aneh di mana tata letak formulir tidak memungkinkan tanda bintang pada posisi standar. Itu juga bermain baik dengan validasi yang memeriksa formulir atau menyoroti kontrol yang tidak lengkap.

Terakhir, itu tidak menambahkan markup tambahan.

Apakah ada solusi bagus yang memiliki semua atau sebagian besar kelebihan dari kode mustahil?

Apakah itu yang ada dalam pikiran Anda?

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

Lihat https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements

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

Biasakan dengan struktur persis Anda: http://jsfiddle.net/bQ859/

Meskipun ini adalah jawaban yang diterima, silakan mengabaikan saya dan menggunakan :aftersintaks yang disarankan di bawah. Solusi saya tidak dapat diakses.

Hasil yang serupa dapat dicapai dengan menggunakan gambar latar belakang dari sebuah gambar asterisk dan mengatur latar belakang label / input / div luar dan lapisan ukuran gambar asterisk. Sesuatu seperti ini:

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

Ini akan menempatkan tanda bintang DI DALAM kotak teks, tetapi menempatkan yang sama pada div.requiredbukannya .required inputmungkin akan lebih apa yang Anda cari, jika sedikit kurang elegan.

Metode ini tidak memerlukan input tambahan.

Untuk memasukkannya dengan tepat KE input seperti yang ditunjukkan pada gambar berikut:

Saya menemukan pendekatan berikut:

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

Situs tempat saya bekerja diberi kode menggunakan tata letak tetap sehingga tidak masalah bagi saya.

Saya tidak yakin itu bagus untuk desain cair.

tulis dalam CSS

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

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

Gambar memiliki ruang 20px di sebelah kanan untuk tidak tumpang tindih dengan panah dropdown pilih

Dan terlihat seperti ini:

Gunakan jQuery dan 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>

Saya pikir ini adalah cara yang efisien untuk dilakukan, mengapa sangat sakit kepala

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

Ini 2019 dan jawaban sebelumnya untuk masalah ini tidak digunakan

1. Kotak CSS
2. Variabel CSS
3. Elemen formulir HTML5
4. SVG dalam CSS

Kotak CSS adalah cara untuk melakukan formulir pada 2019 karena Anda dapat memiliki label sebelum input Anda tanpa memiliki div, bentang, bentang dengan tanda bintang tambahan di dan peninggalan lainnya.

Di sinilah kita akan pergi dengan CSS minimal:

HTML untuk yang di atas:

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

Teks Placeholder dapat ditambahkan juga dan sangat disarankan. (Saya hanya menjawab mid-form ini).

Sekarang untuk variabel 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 untuk elemen formulir:

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

Formulir itu sendiri harus dalam kotak CSS:

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

Nilai untuk kolom dapat diatur ke 1fr autoatau 1frdengan apa pun seperti <p>tag dalam formulir yang ditetapkan untuk rentang 1 / -1. Anda mengubah variabel dalam kueri media Anda sehingga Anda memiliki kotak input menjadi lebar penuh di ponsel dan sesuai di atas pada desktop. Anda juga dapat mengubah celah jaringan di ponsel jika diinginkan dengan menggunakan pendekatan variabel CSS.

Ketika kotak-kotak itu valid maka Anda harus mendapatkan tanda centang hijau alih-alih tanda bintang.

SVG dalam CSS adalah cara untuk menyelamatkan browser dari keharusan melakukan bolak-balik ke server untuk mendapatkan gambar tanda bintang. Dengan cara ini Anda dapat menyempurnakan tanda bintang, contoh-contoh di sini berada pada sudut yang tidak biasa, Anda dapat mengeditnya karena ikon SVG di atas sepenuhnya dapat dibaca. Kotak view juga dapat diubah untuk menempatkan tanda bintang di atas atau di bawah pusat.

Contoh ini menempatkan simbol tanda bintang di depan label untuk menunjukkan input tertentu sebagai bidang wajib. Saya mengatur properti CSS menggunakan% dan em untuk memastikan halaman web saya responsif. Anda dapat menggunakan px atau unit absolut lainnya jika Anda mau.

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

Yang Anda butuhkan adalah: pemilih yang diperlukan - itu akan memilih semua bidang dengan atribut 'wajib' (jadi tidak perlu menambahkan kelas tambahan). Kemudian - masukan gaya sesuai dengan kebutuhan Anda. Anda dapat menggunakan pemilih ': setelah' dan menambahkan tanda bintang dengan cara yang disarankan di antara jawaban lainnya

Anda dapat mencapai hasil yang diinginkan dengan merangkum kode HTML dalam tag div yang berisi kelas "wajib" diikuti oleh kelas "formulir-grup". * Namun ini hanya berfungsi jika Anda memiliki Bootstrap.

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

Bagi mereka yang berakhir di sini, tetapi memiliki jQuery:

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

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