사용자 정의 선택 양식 menggunakan css dan javascript

Kalian ngerasa ngga sihh ? kalau tampilan 기본 양식 요소 di browser itu jelek dan membosankan, belum lagi look nya di tiap browser juga berbeda-beda, khususnya select dan radio-button .

Untuk 입력 텍스트 kita bisa dengan mudah meng-custom nya. Tapi 요소 요소 lain sepertiselect danradio-button itu kita ngga bener-bener bisa custom. kita bisa sihh me-reset style bawaan dari si element nya pake appearance: none; . Tapi untuk element select masih terlihat jelek, karena kita ngga bisa ngasih padding di option box nya.

아니, yang akan kita bahas sekarang adalah bagaimana caranya meng-custom element select menggunakan css dan javascript. Perlu diketahui, seperti yang saya bilang sebelum nya, kita ngga bener-bener bisa meng-custom native select 요소, jadi yang akan kita lakuin adalah membuat 선택 요소 menggunakan div, tanpa mengurangi fungsionalitas 요소 tersebut.

Pertama kita bikin element HTML nya dulu, kita akan buat form utuh dengan 2 input dan 1 select, yang nantinya akan kita test untuk mengirim isi form nya.

<form action="" method="GET">
    <div class="form-group">
        <label for="nama">Nama</label>
        <input type="text" id="nama" name="nama">
    </div>
    <div class="form-group">
        <label for="alamat">Alamat</label>
        <input type="text" id="alamat" name="alamat">
    </div>
    <div class="form-group">
        <label>Daftar Pilihan</label>
        <div class="label">Pilihan 1</div>
        <input type="hidden" id="hidden" name="pilihan">
        <div class="select">
            <div class="options">
                <div class="option">Pilihan 1</div>
                <div class="option">Pilihan 2</div>
                <div class="option">Pilihan 3</div>
                <div class="option">Pilihan 4</div>
                <div class="option">Pilihan 5</div>
            </div>
        </div>
    </div>

    <button type="submit">kirim</button>
</form>

Kita menggunakan div class select untuk menggantikan native select html, dan div class option untuk menggantikan tag option . Kalauinput 숨겨진 kita gunakan untuk mengirim 값 다리 옵션 yang telah dipilih oleh 사용자, yang kita akan 설정 값 nya menggunakan javacsript.

마숙케 바기안 스타일링, 베리굿 코드냐.

* {
     box-sizing: border-box;
}

label {
     display: block;
     margin-bottom: 5px;
}

input, .select-input {
     width: 100%;
     padding: 6px 15px;
     border-radius: 3px;
     border: 1px solid rgb(174, 179, 206);
}

.form-group {
     width: 25%;
     margin-bottom: 10px;
}

.options {
     opacity: 0;
     width: 0;
     height: 0;
     transition: height .5s ease;
     box-shadow: 0px 0px 5px rgba(0, 0, 0, .2);
     margin: 4px 0;
     border-radius: 4px;
}

.active {
     opacity: 1;
     width: 100%;
     height: 180px;
}

.option {
     white-space: nowrap;
     padding: 7px 15px;
     cursor: pointer;
     transition: background .2s ease;
}

.option:hover {
     background: rgb(174, 179, 206);
}

button {
     position: relative;
     z-index: 2;
}

Pertama kita set display dari label menjadi block agar input form turun ke bawah, lalu set padding, margin, dan border-radius agar tampilan lebih rapih dan tidak monoton.

Kita 스타일링 클래스 선택 입력 sebagaimana 입력 seharusnya, yang nantinya akan 사용자 gunakan untuk memilih. Untuk class options(옵션 래퍼) kita kondisikan diawal agar tidak muncul, menggunakan opacity , width dan kita beri transisi untuk height agar ketikakebawpertiah .

Untuk class active nantinya akan muncul ketika select input diklik oleh user, height nya bisa disesuaikan dengan berapa option yang ada. Kenapa kita perlu set height secara statis ?, karena untuk memberikan transisi, kalau kita set jadi max-content, tidak akan ada transisi ketika muncul.

Masuk ke bagian terakhir yaitu javascript, 베리쿠트 코드 nya.

const select = document.querySelector('.select-input')
const container = document.querySelector('.options')
const options = document.querySelectorAll('.option')
const input = document.getElementById('hidden')

select.addEventListener('click', function() {
     container.classList.toggle('active')
})

options.forEach(option => {
     option.addEventListener('click', function() {
          const text = option.textContent;
          select.textContent = text;
          input.value = text;
          container.classList.toggle('active')
     })
})

Pertama kita select semua element yang dibutuhkan, lalu kasih event ke select-input ketika di klik memunculkan atau menghapus class active.

Setelah option muncul, yang kita lakukan adalah mengambil text yang dipilih user menggunakan textContent, mereplace value dari select-input, men-set 옵션 값 yang kita pilih ke 입력 숨겨진 yang sudah kita siapkan dan menghapus class active untuk menyembunyikan kembali 옵션

세키안 튜토리얼 singkat nya, semoga bermanfaat, mohon maaf kalau ada salah, terimakasih.