/* style select */ .cui-wrap-select { position: relative; } /* Set width for each label */ .cui-wrap-select .elementor-field-option label[for="Hadir"] { width: 100%; } .cui-wrap-select .elementor-field-option label[for="Tidak hadir"], .cui-wrap-select .elementor-field-option label[for="Masih Ragu"] { width: 50%; } .cui-wrap-select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 10px; border: 1px solid black; border-radius: 5px; background-color: #fff; font-size: 12px; cursor: pointer; width: 100%; outline: none; transition: background-color 0.2s, color 0.2s; /* Efek transisi untuk perubahan warna */ } .cui-wrap-select select option { color: black; } /* Set background color based on label */ .cui-wrap-select .elementor-field-option label { border: 1px solid black; border-radius: 5px; background-color: #fff; display: inline-block; padding: 12px 20px; margin: 7px 0; font-size: 12px; transition: 0.2s all; color: black; cursor: pointer; text-align: center; } .cui-wrap-select .elementor-field-option label:hover { color: #fff; background-color: blue; transition: all 200ms ease-in; } .cui-wrap-select .elementor-field-option label.active { color: white !important; background-color: blue; } .cui-wrap-select .elementor-field-option label:not(.active) { color: black; /* Warna teks default ketika label tidak aktif */ background-color: #fff; /* Warna latar belakang default ketika label tidak aktif */ } .cui-wrap-select .elementor-field-option label.active[for="Hadir"] { background-color: #3D9A62; /* Warna latar belakang ketika label "Hadir" aktif */ } .cui-wrap-select .elementor-field-option label.active[for="Tidak hadir"] { background-color: #d90a11; /* Warna latar belakang ketika label "Tidak Hadir" aktif */ } .cui-wrap-select .elementor-field-option label.active[for="Masih Ragu"] { background-color: #d7a916; /* Warna latar belakang ketika label "Masih Ragu" aktif */ } document.addEventListener('DOMContentLoaded',function(){var e=document.getElementById('konfirmasi');var t=document.createElement('div');t.classList.add('elementor-field-option');e.parentNode.insertBefore(t,e.nextSibling);var o=e.querySelectorAll('option:not([disabled])');o.forEach(function(o){var n=document.createElement('label');n.textContent=o.textContent;n.setAttribute('for',o.getAttribute('value'));t.appendChild(n)});e.style.display='none';if(e.value!==''){var n=document.querySelector('label[for="'+e.value+'"]');n.classList.add('active');}t.addEventListener('click',function(o){if(o.target.tagName==='LABEL'){var n=o.target.getAttribute('for');e.value=n;t.querySelectorAll('label').forEach(function(t){t.classList.remove('active')});o.target.classList.add('active');}});});