ChatGPT CSS стилизация checkbox

ChatGPT CSS стилизация checkbox — настало время и мне поделиться своим опытом прикладного использования ChatGPT для решения каждодневных задач.

Я не из тех, кто паникует по поводу того, что искусственный интеллект скоро всех нас заменит. От этого меня спасает большой опыт в организации различного рода процессов с живыми людьми.

В то же время я на себе прочувствовал широкие возможности доступных на данный момент инструментов с использованием ИИ. При этом точно не могу назвать себя сильно активным пользователем таких инструментов, но иногда бывает. Также есть и положительная динамика. Одним из успешных примеров такого использования я сегодня поделюсь.

Подпишитесь на Tiku Digital ВКонтакте

Я занимался разработкой раздела «Услуги» на своем сайте и это раздел подразумевал наличие формы с заказом услуг. В этой форме можно выбрать типы услуг, их я решил реализовать в виде инлайновых кнопок при помощи CSS. При этом форма создавалась через плагин для WordPress, который называется Contact Form 7, поэтому разметку чекбоксов я менять не мог (простым способом).

Мне стало лень самому в очередной раз писать стили, да и времени особо не было. И я вдруг вспомнил, что есть же добрый друг ChatGPT, который уже пару раз помогал мне искать ошибки в готовом коде.

Далее будет история моего диалога с ChatGPT, которая привела к устроившему меня результату.

Пример задачи для ChatGPT

Я написал примерно следующее:

Привет, у меня есть вот такая HTML-разметка:

<span class="wpcf7-form-control-wrap" data-name="checkbox-560">
	<span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required usligi-checkboxes wpcf7-not-valid" id="usligi-checkboxes" aria-describedby="wpcf7-f18817-o1-ve-checkbox-560">
		<span class="wpcf7-list-item first">
			<label>
				<input type="checkbox" name="checkbox-560[]" value="Интернет-маркетинг" wfd-id="id11">
				<span class="wpcf7-list-item-label">Интернет-маркетинг</span>
			</label>
		</span>
		<span class="wpcf7-list-item">
			<label>
				<input type="checkbox" name="checkbox-560[]" value="Дизайн" wfd-id="id12">
				<span class="wpcf7-list-item-label">Дизайн</span>
			</label>
		</span>
		<span class="wpcf7-list-item last">
			<label>
				<input type="checkbox" name="checkbox-560[]" value="Веб-разработка" wfd-id="id13">
				<span class="wpcf7-list-item-label">Веб-разработка</span>
			</label>
		</span>
	</span>
	<span class="wpcf7-not-valid-tip" aria-hidden="true">Обязательное&nbsp;поле.</span>
</span>

И мне нужно стилизовать чекбоксы как inline кнопки.

На это ChatGPT выдал вот такой результат:

«
Хорошо, давайте попробуем стилизовать чекбоксы как inline кнопки. Мы можем использовать CSS для этого. Вот пример стилей CSS:

/* Скрыть оригинальные чекбоксы */
.wpcf7-list-item input[type="checkbox"] {
    display: none;
}

/* Стилизация лейблов как кнопок */
.wpcf7-list-item label {
    display: inline-block;
    padding: 8px 12px;
    margin-right: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}

/* Стилизация выбранных кнопок */
.wpcf7-list-item input[type="checkbox"]:checked + label {
    background-color: #007bff;
    color: #fff;
}

Этот CSS скрывает оригинальные чекбоксы и стилизует их лейблы в виде кнопок. Когда вы выбираете кнопку, фон меняется на синий цвет.

Попробуйте применить эти стили к вашей разметке HTML и посмотрите, как это работает. Если у вас возникнут какие-либо проблемы или вопросы, не стесняйтесь спрашивать!

Уточнение задачи для ChatGPT

Дальше я уточняю, что нужно использовать определенный класс обёртку из разметки. Он переписывает код. И я иду к себе на сайт тестировать как это работает.

В итоге вот эта часть стилей не работает:

/* Стилизация выбранных кнопок внутри обертки */
.usligi-checkboxes input[type="checkbox"]:checked + label {
    background-color: #007bff;
    color: #fff;
}

И я не долго думая прошу его переписать это на JS т. к. уже не верю, что CSS здесь поможет.

На это ChatGPT ожидаемо выдает результат на JS:

Понял вас. Давайте попробуем сделать это с помощью JavaScript. Вот пример кода:

// Получаем все чекбоксы внутри обертки
var checkboxes = document.querySelectorAll('.usligi-checkboxes input[type="checkbox"]');

// Для каждого чекбокса добавляем обработчик события
checkboxes.forEach(function(checkbox) {
    checkbox.addEventListener('change', function() {
        // Если чекбокс выбран, применяем стили
        if (this.checked) {
            this.nextElementSibling.style.backgroundColor = '#007bff';
            this.nextElementSibling.style.color = '#fff';
        } else {
            // Если чекбокс не выбран, удаляем стили
            this.nextElementSibling.style.backgroundColor = '';
            this.nextElementSibling.style.color = '';
        }
    });
});

Этот код будет добавлять обработчик события change для каждого чекбокса внутри обертки .usligi-checkboxes. Когда состояние чекбокса изменяется, он проверяет, выбран ли чекбокс, и соответственно применяет или удаляет стили. Попробуйте вставить этот код в ваш проект и проверьте его работоспособность. Если у вас возникнут какие-либо вопросы, не стесняйтесь спрашивать!

Я тестирую код и все работает, но мне не нравиться, что стили назначаются через JS и прошу его поправить код, чтобы JS назначал класс для label. Для этого понадобилось два захода.

Дальше ChatGPT выдает итоговый результат, который я использовал у себя на сайте.

Конечно, внесем изменения, чтобы менять стили у элемента label. Вот обновленный код:

// Получаем все чекбоксы внутри обертки
var checkboxes = document.querySelectorAll('.usligi-checkboxes input[type="checkbox"]');

// Для каждого чекбокса добавляем обработчик события
checkboxes.forEach(function(checkbox) {
    checkbox.addEventListener('change', function() {
        // Если чекбокс выбран, применяем стили к label
        if (this.checked) {
            this.parentElement.style.backgroundColor = '#007bff';
            this.parentElement.style.color = '#fff';
        } else {
            // Если чекбокс не выбран, удаляем стили
            this.parentElement.style.backgroundColor = '';
            this.parentElement.style.color = '';
        }
    });
});

Теперь код будет применять стили к элементу label, который является родительским элементом для чекбокса. Попробуйте этот обновленный код и проверьте его работоспособность. Если у вас возникнут дополнительные вопросы, не стесняйтесь спрашивать!

Прошу не назначать стили через JS, а просто добавлять класс:

Мешок без костей отвечает:

Конечно, вместо прямого назначения стилей в JavaScript мы можем добавить и удалить класс, который содержит нужные стили. Вот обновленный код:

// Получаем все чекбоксы внутри обертки
var checkboxes = document.querySelectorAll('.usligi-checkboxes input[type="checkbox"]');

// Для каждого чекбокса добавляем обработчик события
checkboxes.forEach(function(checkbox) {
    checkbox.addEventListener('change', function() {
        // Если чекбокс выбран, добавляем класс
        if (this.checked) {
            this.parentElement.classList.add('checked');
        } else {
            // Если чекбокс не выбран, удаляем класс
            this.parentElement.classList.remove('checked');
        }
    });
});

Теперь в CSS нужно создать класс .checked, который будет содержать нужные стили для выбранных чекбоксов. Например:

.checked {
    background-color: #007bff;
    color: #fff;
}

Таким образом, JavaScript будет только добавлять или удалять класс .checked, а стили будут определены в CSS. Попробуйте этот обновленный код и проверьте его работу!

Было ещё небольшое уточнение про вложенность классов, но это незначительно: