Как создать радиокнопки с текстом внутри рамки?

Можете помочь мне реализовать текст внутри рамки с использованием radio input? Я прикладываю эскиз своего дизайна. <br/>
  • 17 апреля 2025 г. 0:05
Ответы на вопрос 1
Конечно! Вы можете создать радиокнопки (radio buttons) с текстом внутри рамки с помощью HTML и CSS. Вот пример кода, который демонстрирует, как это можно сделать:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Радиокнопки с текстом внутри рамки</title>
    <style>
        .radio-group {
            display: flex;
            flex-direction: column;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
            width: 200px;
        }
        .radio-item {
            display: flex;
            align-items: center;
            margin: 5px 0;
        }
        input[type="radio"] {
            margin-right: 10px;
        }
    </style>
</head>
<body>

<div class="radio-group">
    <label class="radio-item">
        <input type="radio" name="option" value="option1">
        Вариант 1
    </label>
    <label class="radio-item">
        <input type="radio" name="option" value="option2">
        Вариант 2
    </label>
    <label class="radio-item">
        <input type="radio" name="option" value="option3">
        Вариант 3
    </label>
</div>

</body>
</html>
```

### Объяснение кода:

1. **HTML-структура**:
   - Создан `<div>` с классом `radio-group`, который содержит несколько элементов `<label>`, каждый из которых включает радиокнопку (`<input type="radio">`) и текст.
   - Каждая радиокнопка имеет имя `option`, чтобы они были частью одной группы.

2. **CSS-стили**:
   - `.radio-group`: определяет стили для рамки, как фон, отступы и закругление углов.
   - `.radio-item`: размещает текст и радиокнопку в одной строке и добавляет отступы между элементами.
   - `input[type="radio"]`: добавляет отступ справа от радиокнопки, чтобы разделить её от текста.

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