Щелкаемый текст для замены переключателей

На чтение 4 мин Опубликовано 27.12.2024

Вопрос или проблема

Привет, ребята! Я пытаюсь получить помощь в мозговом штурме.

У меня есть контактная форма на сайте, в которой вместо чего-то вроде чекбоксов или радио-кнопок используется выделяемый текст.

Я использую formidable forms, у меня всё получилось со стилями для радио-кнопок, но это просто не так интересно, как только текст.

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

Это мой текущий дизайн на сайте

Это был дизайн

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

<div class="frm_radio" id="frm_radio_18-0">
 <label for="field_yhi3q-0">        
  <input type="radio" name="item_meta[18]" id="field_yhi3q-0" value="WEB 
 DESIGN &amp; DEVELOPMENT" data-invmsg="I would like to talk to you about 
 is invalid">
 WEB DESIGN &amp; DEVELOPMENT
 </label>
</div>

Это вопрос по CSS, поэтому это действительно не то место для него.

Тем не менее, вам нужно использовать оператор + и селектор :checked вот так:

(Это предполагает, что ваши радио-кнопки сделаны так):

<input type="radio" id="my_awesome_radio_1" value="value1" />
<label for="my_awesome_radio_1">Value 1</label>
<input type="radio" id="my_awesome_radio_2" value="value2" />
<label for="my_awesome_radio_2">Value 2</label>
<input type="radio" id="my_awesome_radio_3" value="value3" />
<label for="my_awesome_radio_3">Value 3</label>

CSS-код:

input[type=radio] {
   display:none;
}

input[type=radio] + label {
   display: inline-block;
   border: 1px solid #eee;
   padding: 10px;
   margin-right: 10px;
   color: #eee;
}

input[type=radio]:checked + label {
   background: #eee;
   color: #000;
}

Ответ или решение

Заголовок: Замена радиокнопок на кликабельный текст в форме контактов

Введение:
Вы сталкиваетесь с задачей замены радиокнопок на более привлекательный вариант с использованием кликабельного текста в вашей форме контактов на сайте. Это требует не только изменения стиля кнопок, но и улучшения общего пользовательского интерфейса. Давайте разберемся, как можно реализовать эту идею с помощью CSS и HTML.

Задача:
Ваша цель — изменить способ, которым пользователи взаимодействуют с выбором опций в форме. От вас требуется убрать видимые радиокнопки и заменить их на стилизованный текст, который будет меняться в зависимости от состояния (выбран/не выбран).

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

Решение:
Наиболее простой и эффективный способ — использовать CSS-селектор :checked и т.н. "соседний" селектор +. Это позволит изменять стиль текста в зависимости от состояния радиокнопки (выбрана/не выбрана).

HTML Разметка:

<input type="radio" id="option1" name="options" value="value1" />
<label for="option1">Опция 1</label>
<input type="radio" id="option2" name="options" value="value2" />
<label for="option2">Опция 2</label>
<input type="radio" id="option3" name="options" value="value3" />
<label for="option3">Опция 3</label>

CSS Код:
```
input[type=radio] {
display: none;
}
```

input[type=radio] + label {
display: inline-block;
border: 1px solid #ccc;
padding: 10px 20px;
margin-right: 10px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
color: #000;
background-color: #f4f4f4;
}

input[type=radio]:checked + label {
background-color: #0044cc;
color: #fff;
border-color: #0044cc;
}



Итог:
Ваш сайт будет выглядеть более современно и стильно благодаря такой настройке интерфейса. Использование CSS-селекторов позволяет вам динамически управлять внешним видом элементов формы, обеспечивая более приятное взаимодействие с пользователем. Это также улучшит общее восприятие вашего сайта и может увеличить уровень взаимодействия пользователей.

Заключение:
Замена радиокнопок на кликабельный текст — это не только вопрос эстетики, но и улучшения юзабилити. Понимание и применение правильных техник CSS и HTML поможет вам создавать высококачественные и современности формы на вашем сайте.