Примеры задач, с которыми мы работаем

Оставьте контакты и коротко напишите, какая задача стоит перед вашей компанией. Мы свяжемся с вами и предложим подходящее решение

<style>
/* ========== КАСТОМНЫЙ ВЫПАДАЮЩИЙ СПИСОК ========== */

.custom-select-wrapper {
position: relative;
width: 100%;
max-width: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin-bottom: 20px;
}

/* Лейбл */
.custom-select-label {
display: block;
font-size: 14px;
font-weight: 500;
color: #6B7280;
margin-bottom: 8px;
}

/* Основной блок */
.custom-select {
position: relative;
width: 100%;
cursor: pointer;
}

/* Триггер (то что видим всегда) */
.select-trigger {
width: 100%;
padding: 16px 20px;
font-size: 16px;
color: #1F1F1F;
background: #FFFFFF;
border: 1px solid #E2E4E8;
border-radius: 16px;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
transition: all 0.2s ease;
}

.select-trigger:hover {
border-color: #BEC3CC;
}

.select-trigger.active {
border-color: #3B82F6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Текст в триггере */
.select-value {
flex: 1;
}

/* Стрелка */
.select-arrow {
width: 20px;
height: 20px;
transition: transform 0.2s ease;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
}

.select-trigger.active .select-arrow {
transform: rotate(180deg);
}

/* ВЫПАДАЮЩИЙ СПИСОК */
.select-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: #FFFFFF;
border: 1px solid #E2E4E8;
border-radius: 16px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
z-index: 999;
max-height: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: all 0.25s ease;
}

.select-dropdown.open {
max-height: 300px;
opacity: 1;
visibility: visible;
overflow-y: auto;
}

/* Пункты списка */
.select-option {
padding: 12px 20px;
font-size: 16px;
color: #1F1F1F;
cursor: pointer;
transition: background 0.15s ease;
}

.select-option:hover {
background-color: #F3F4F6;
}

.select-option.selected {
background-color: #EEF2FF;
color: #3B82F6;
font-weight: 500;
}

/* Скролл */
.select-dropdown::-webkit-scrollbar {
width: 6px;
}

.select-dropdown::-webkit-scrollbar-track {
background: #F3F4F6;
border-radius: 10px;
}

.select-dropdown::-webkit-scrollbar-thumb {
background: #CBD5E1;
border-radius: 10px;
}
</style>

<div class="custom-select-wrapper">
<label class="custom-select-label">Вид услуги</label>

<div class="custom-select">
<div class="select-trigger">
<span class="select-value">Документооборот и цифровизация</span>
<div class="select-arrow"></div>
</div>

<div class="select-dropdown">
<div class="select-option selected" data-value="digital">Документооборот и цифровизация</div>
<div class="select-option" data-value="legal">Юридические услуги</div>
<div class="select-option" data-value="it">IT-консалтинг</div>
<div class="select-option" data-value="automation">Автоматизация склада</div>
<div class="select-option" data-value="accounting">Бухгалтерский аутсорсинг</div>
</div>
</div>

<input type="hidden" name="service" id="serviceValue" value="digital">
</div>

<script>
(function() {
var wrapper = document.querySelector('.custom-select-wrapper');
var select = wrapper.querySelector('.custom-select');
var trigger = wrapper.querySelector('.select-trigger');
var dropdown = wrapper.querySelector('.select-dropdown');
var selectedValueSpan = wrapper.querySelector('.select-value');
var options = wrapper.querySelectorAll('.select-option');
var hiddenInput = wrapper.querySelector('#serviceValue');

trigger.addEventListener('click', function(e) {
e.stopPropagation();
var isOpen = dropdown.classList.contains('open');

var allDropdowns = document.querySelectorAll('.select-dropdown.open');
for (var i = 0; i < allDropdowns.length; i++) {
if (allDropdowns[i] !== dropdown) {
allDropdowns[i].classList.remove('open');
var parentTrigger = allDropdowns[i].closest('.custom-select').querySelector('.select-trigger');
if (parentTrigger) parentTrigger.classList.remove('active');
}
}

if (isOpen) {
dropdown.classList.remove('open');
trigger.classList.remove('active');
} else {
dropdown.classList.add('open');
trigger.classList.add('active');
}
});

for (var j = 0; j < options.length; j++) {
options[j].addEventListener('click', function() {
var value = this.getAttribute('data-value');
var text = this.textContent;

selectedValueSpan.textContent = text;

for (var k = 0; k < options.length; k++) {
options[k].classList.remove('selected');
}
this.classList.add('selected');

if (hiddenInput) hiddenInput.value = value;

dropdown.classList.remove('open');
trigger.classList.remove('active');
});
}

document.addEventListener('click', function(e) {
if (!wrapper.contains(e.target)) {
dropdown.classList.remove('open');
trigger.classList.remove('active');
}
});
})();
</script>