‘~’ эти маленькие волнистые линии применимы только к контейнерам родственного уровня, которые следуют, перепишите свой html следующим образом, и все готово!
<дел> <дел>
<дел>
дел> дел>
https://jsfiddle.
net/bwczegym/5/
Если вы переместите label.pay после кнопки радио , то я думаю, что ваш css делает то, что вы намеревались.
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Создавайте потрясающие радиокарты с помощью HTML, CSS и JavaScript | Тара Прасад Рутрей
Научитесь превращать старые радиокнопки в современные радиокарты с помощью веб-технологий.
Радиокнопки — один из важнейших элементов форм. Они удивительны при правильном использовании, поскольку упрощают задачу выбора варианта из заданного набора списков. Но переключатели по умолчанию выглядят не очень хорошо. Нам нужно преобразовать его, чтобы он выглядел потрясающе для пользователей, что значительно улучшит пользовательский опыт веб-сайта.
В этой статье я дам вам пошаговое руководство по внедрению пользовательских радиокарт в ваше веб-приложение. Здесь мы будем превращать старые радиокнопки в потрясающе выглядящие карты CSS. Для каждой карты будет доступен значок проверки (галочки), по умолчанию он будет скрыт и появится только тогда, когда пользователь нажмет на карту.
Создайте макет радиокарт с помощью HTML.
Сделайте радиокарты функциональными с помощью JavaScript.
Разработка радиокарт с помощью CSS.
Давайте настроим базовую разметку HTML для наших радиокарт. Он будет включать в себя контейнер для хранения карт. Внутри него мы добавим три карты, и каждая из них будет иметь значок галочки (галочки), значок карты (изображение), метку карты (название) и описание метки карты (дополнительный контент). Каждая радиокарта будет иметь общий класс с именем 9.0033 radio-card , и чтобы сделать его функциональным, нам нужно добавить еще один уникальный класс к каждому из них, например radio-card-1 , radio-card-2 , radio-card-3 , и так далее. на. Эти карты будут иметь атрибут onclick , который вызовет функцию с именем selectRadioCard() . Передайте номер карты, например 1, 2 или 3 , в параметре. Мы напишем логику, чтобы сделать карту функциональной на следующем шаге.
Добавьте следующий фрагмент кода в раздел, где вы хотите внедрить пользовательские радиокарты.
Теперь нам нужно реализовать логику для обеспечения работы радиокарт, когда пользователь инициирует событие щелчка на карточке. Добавьте функцию с именем selectRadioCard , которая будет принимать один параметр с именем cardNo . Сначала он найдет все радиокарты, а затем просмотрит каждую из них и удалит выбранный класс . После этого он найдет элемент с указанным номером карты, например radio-card-1, radio-card-2 или radio-card-3 , и добавит класс выбрал для него .
Добавьте следующий фрагмент кода в элемент сценария на странице. Или вы можете создать внешний файл JavaScript и использовать его.
Поскольку мы завершили реализацию нашей пользовательской радиокарты, нам нужно добавить несколько фрагментов CSS для разработки макета нашего HTML-контента.
Добавьте следующий фрагмент кода к элементу в стиле на странице. Или вы можете создать внешний файл CSS и использовать его.
Посетите следующий репозиторий GitHub, чтобы загрузить файлы.