Menambahkan tanda bintang ke bidang yang diperlukan di Bootstrap 3


166

HTML saya memiliki kelas yang disebut .requiredyang ditugaskan untuk bidang yang diperlukan.

Ini HTML-nya:

<form action="/accounts/register/" method="post" role="form" class="form-horizontal">
    <input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
    <div class="form-group required">
       <label class="col-md-2 control-label">Username</label>
       <div class="col-md-4">
         <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" />
       </div>
    </div>
    <div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">first name</label><div class="col-md-4"><input class="form-control" id="id_first_name" maxlength="30" name="first_name" placeholder="first name" required="required" title="" type="text" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">last name</label><div class="col-md-4"><input class="form-control" id="id_last_name" maxlength="30" name="last_name" placeholder="last name" required="required" title="" type="text" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">&#160;</label><div class="col-md-4"><div class="checkbox"><label><input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service</label></div></div></div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
           <button type="submit" class="btn btn-primary">
              <span class="glyphicon glyphicon-star"></span> Sign Me Up!
           </button>
        </div>
    </div>
</form>

Saya menambahkan yang berikut ke CSS saya;

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

Tetap saja itu tidak memberi merah di *sekitar bidang yang diperlukan. Apa yang kulewatkan di sini? Apakah tidak ada cara langsung dalam memperkenalkan Bootstrap 3* ke bidang yang diperlukan?


EDIT

The *dalam syarat dan kondisi tidak muncul segera untuk kotak centang. Bagaimana cara memperbaikinya?

masukkan deskripsi gambar di sini


2
Harap tandai pertanyaan yang dijawab.
LoveAndHappiness

Jawaban:


283

Gunakan .form-group.requiredtanpa ruang.

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

Edit:

Untuk kotak centang Anda dapat menggunakan kelas pseudo: not (). Anda menambahkan * yang diperlukan setelah setiap label kecuali jika itu kotak centang

.form-group.required:not(.checkbox) .control-label:after, 
.form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */
   content:"*";
   color:red;
}

Catatan: tidak diuji

Anda harus menggunakan kelas .text atau menargetkannya jika tidak, coba html ini:

<div class="form-group required">
   <label class="col-md-2 control-label">&#160;</label>
   <div class="col-md-4">
      <div class="checkbox">
         <label class='text'> <!-- use this class -->
            <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
         </label>
      </div>
   </div>
</div>

Oke edit ketiga:

CSS kembali ke apa dulu

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

HTML:

<div class="form-group required">
   <label class="col-md-2">&#160;</label> <!-- remove class control-label -->
   <div class="col-md-4">
      <div class="checkbox">
         <label class='control-label'> <!-- use this class as the red * will be after control-label -->
            <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
         </label>
      </div>
   </div>
</div>

3
Saya mencoba yang diedit, tetapi tidak berhasil. bisakah kamu memeriksanya?
badai otak

Ubah sesuatu, juga di CSS
Timvp

1
Tampaknya bukan BS3 generik, tetapi CSS khusus? Ini terlihat responsif bagi saya juga, jadi mungkin tidak apa-apa untuk menambahkan ini (ke file tema BS Anda, misalnya bootstrap-theme.css).
Roland

Untuk membedakan elemen pseudo-class dan pseudo-elemen yang dapat Anda gunakan ::after. Level 3 spekulasi CSS keluar.
Niyongabo

73

Dengan asumsi inilah bentuk HTML

<div class="form-group required">
   <label class="col-md-2 control-label">E-mail</label>
   <div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div>
</div>

Untuk menampilkan tanda bintang di sebelah kanan label:

.form-group.required .control-label:after { 
    color: #d00;
    content: "*";
    position: absolute;
    margin-left: 8px;
    top:7px;
}

Atau di sebelah kiri label:

.form-group.required .control-label:before{
   color: red;
   content: "*";
   position: absolute;
   margin-left: -15px;
}

Untuk membuat tanda bintang besar yang bagus, Anda dapat menambahkan baris ini:

font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 14px;

Atau jika Anda menggunakan Font Awesome tambahkan baris-baris ini (dan ubah baris konten):

font-family: 'FontAwesome';
font-weight: normal;
font-size: 14px;
content: "\f069";

1
top:7px;akan menyebabkan masalah jika label multi-line. Akan lebih baik untuk menggantinya dengan margin-top: -4px;misalnya.
sasha_gud

7

.form-group .required .control-label:aftermungkin seharusnya .form-group.required .control-label:after. Penghapusan ruang antara .form-grup dan .required adalah perubahan.


Terima kasih! juga berfungsi untuk bootstrap 2.3 dengan .control-group.required .control-label:after { content:"*"; color:red; }
edditor

4

Dua jawaban lainnya benar. Saat Anda memasukkan spasi di pemilih CSS Anda, Anda menargetkan elemen anak jadi:

.form-group .required {
    styles
}

Menargetkan elemen dengan kelas "wajib" yang ada di dalam elemen dengan kelas "grup bentuk".

Tanpa ruang itu menargetkan elemen yang memiliki kedua kelas. 'wajib' dan 'formulir-kelompok'


Ini adalah masalah terpisah dari pertanyaan awal Anda. Tetapi CSS Anda melakukan persis seperti yang Anda katakan. Ini menempatkan tanda bintang dengan bidang label (yang untuk syarat dan ketentuan Anda kosong) dan bukan bidang input. Jika Anda ingin mereka tampil bersama, Anda harus mengelompokkannya dalam HTML. Tetapi kemudian Anda memiliki bidang label kosong yang buruk. Saya hanya akan membuang label pada syarat dan ketentuan tetapi tetap validasi.
Corey

1

CSS ini bekerja untuk saya:

.form-group.required.control-label:before{
   color: red;
   content: "*";
   position: absolute;
   margin-left: -10px;
}

dan HTML ini:

<div class="form-group required control-label">
  <label for="emailField">Email</label>
  <input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" />
</div>

Agak aneh memiliki label kontrol pada div yang berisi label dan input.
devlin carnate
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.