Memaksimalkan kerja selektor adjacent sibling sangat bermanfaat untuk membuat komunikasi yang lebih hidup pada ketika proses pengisian formulir untuk pengunjung/anggota. Idenya adalah, seorang calon anggota mencoba untuk mengisi formulir. Dan ketika kursor teks aktif di dalam elemen formulir tersebut, maka akan muncul pesan singkat di sebelahnya yang menjelaskan ihwal apa saja yang harus calon anggota lakukan terhadap formulir yang sedang aktif tersebut.
Ide di atas dapat kita realisasikan hanya dengan cara ibarat ini:
HTML
<input type="text"> <label>Mohon ketik setiap awalan dengan abjad kapital</label>CSS
/* Menyembunyikan label-label formulir */ label {visibility:hidden} /* Menampilkan label formulir ketika elemen input terfokus */ input:focus + label {visibility:visible}Yang lalu akan menghasilkan komunikasi antarmuka ibarat ini:
Melakukan beberapa pembaharuan pada tampilan elemen <label> untuk membuatnya tampak sebagai tooltip serta menambahkan pengaruh transisi untuk memperlembut proses tampilnya deskripsi/pesan formulir, maka akan membuat komunikasi antarmuka menjadi semakin tegas tanpa harus meminta pengunjung yang sedang mengisi formulir tersebut pergi menuju ke halaman khusus mengenai panduan cara mengisi formulir. Dengan cara ini, pengunjung/calon anggota akan dipandu pada ketika yang sama ketika mereka sedang mengisi formulir:
HTML
<div class="form-item"> <input type="text"> <label>Descriptions...</label> </div>CSS
/* Form item wrapper */ .form-item { margin:1em 0 0; position:relative; } /* Form item title */ .form-item strong { display:block; margin:0 0 5px; } /* Form items */ .form-item input, .form-item textarea { display:block; border:1px solid #ccc; padding:4px; margin:0 0; width:250px; font:inherit; line-height:normal; color:inherit; -webkit-box-shadow:inset 0 1px 3px -1px rgba(0,0,0,.2); -moz-box-shadow:inset 0 1px 3px -1px rgba(0,0,0,.2); box-shadow:inset 0 1px 3px -1px rgba(0,0,0,.2); } /* Tooltip */ .form-item label { display:block; position:absolute; bottom:100%; left:150px; margin-bottom:2em; font-size:11px; font-weight:bold; color:white; white-space:nowrap; line-height:normal; padding:.6em 1em; background-color:black; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; visibility:hidden; opacity:0; /* Transition effect */ -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -ms-transition:all .2s ease-out; -o-transition:all .2s ease-out; transition:all .2s ease-out; } /* Tooltip arrow */ .form-item label:after { content:""; display:block; width:0; height:0; border:5px solid transparent; position:absolute; top:100%; left:2em; border-top-color:black; } .form-item input:focus, .form-item textarea:focus {border-color:#aaa} /* Show tooltip when the form is being focused */ .form-item input:focus + label, .form-item textarea:focus + label { visibility:visible; opacity:1; margin-bottom:-.5em; }