Saya memiliki struktur html:

<div class="floating-labels">
   <div class="form-group focused">
      <span class="select2 select2-container">
         <span class="selection">
            <span class="select2-selection">
                <ul class="select2-selection__rendered">
                    <li class="select2-search select2-search--inline">
                        <input class="select2-search__field" type="search"> // on focus here
                    </li>
                </ul>
            </span>
         </span>
         <span class="dropdown-wrapper" aria-hidden="true"></span>
       </span>
       <span class="bar"></span> // change style here                        
    </div>                                    
 </div>

Di sini saya ingin menambahkan gaya width: 50%; ke kelas .bar ketika saya fokus pada kotak input dengan kelas .select2-search__field melalui css.

Saya mencoba seperti ini

 .floating-labels > .focused > .select2-search__field:focus ~ .floating-labels > .focused > bar:after {
       width: 50%;
  }

Tapi itu tidak berhasil.

0
VinoCoder 18 Mei 2021, 11:32

1 menjawab

Jawaban Terbaik

Jika Anda ingin melakukannya tanpa menggunakan Javascript maka hanya ada satu opsi dengan struktur HTML Anda, focus-within Anda dapat menemukan informasi lebih lanjut di MDN, dukungan sekarang sangat bagus di browser modern.

Periksa focus-within pada rentang .select2 dan pilih elemen .bar berikutnya :after dan terapkan gaya Anda di sana. Jika Anda perlu mendukung IE ada polyfill tetapi Anda akan menggunakan Javascript dengan cara apa pun sehingga Anda sebaiknya menggunakan Javascript untuk memanipulasi gaya Anda.

.select2:focus-within + .bar:after {
  width: 50%
}

.bar {
  position: relative;
  display: block;
  height: 50px;
}

.bar:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background-color: red;
  display: block;
  transition: .3s ease
}
<div class="floating-labels">
  <div class="form-group focused">
    <span class="select2 select2-container">
         <span class="selection">
            <span class="select2-selection">
                <ul class="select2-selection__rendered">
                    <li class="select2-search select2-search--inline">
                        <input class="select2-search__field" type="search">
                    </li>
                </ul>
            </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
    </span>
    <span class="bar"></span>
  </div>
</div>
3
JHeth 18 Mei 2021, 09:02