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

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

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

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

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

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

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

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

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

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

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

«

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

Интернет-маркетинг

Дизайн

Веб-разработка

Обязательное поле.

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

»

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

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

/* Скрыть оригинальные чекбоксы */

.wpcf7-list-item input {

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:checked + label {

background-color: #007bff;

color: #fff;

}

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

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

»

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

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

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

/* Стилизация выбранных кнопок внутри обертки */

.usligi-checkboxes input:checked + label {

background-color: #007bff;

color: #fff;

}

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

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

«

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

// Получаем все чекбоксы внутри обертки

var checkboxes = document.querySelectorAll('.usligi-checkboxes input');



// Для каждого чекбокса добавляем обработчик события

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');



// Для каждого чекбокса добавляем обработчик события

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');



// Для каждого чекбокса добавляем обработчик события

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. Попробуйте этот обновленный код и проверьте его работу!

»

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

ChatGPT CSS стилизация checkbox: заключение и выводы

Вот и все! Этим примером мне почему-то очень захотелось поделиться, хоть в нём и нет ничего сложного и уникального, просто это на мой взгляд очень наглядно и естественно.

У меня также родилась мысль, что гораздо сложнее знать и вспомнить о том, что те или иные задачи сейчас можно решить при помощи ИИ, чем сделать это.

А как вы используете ИИ в своих делах и работе? Поделитесь в комментариях!

Больше постов про искусственный интеллект в моём блоге.

https://tiku.ru/blog/chatgpt-css-stilizaciya-checkbox/