Loading...
HTML, CSS, Javascript | не могу поставить type=radio в
не могу выровнять в форме поиска радиокнопку , помогите плиз что за дичь не пойму . что только не делал (((




php
    <div class="search-bar"> 
echo'<form method="post" action="/blog/search.php?go" >';

$search=stripcslashes(htmlspecialchars($search));
echo'<input type="text" name="search" maxlength="64" value="'.$search.'" placeholder="Поиск без ограничений..." />';
echo " <div class='checkBox'>";
echo '<label>dddd<input type="radio" name="where" value="2"'.($where==2?' ':null).'></label>';
echo '<label>dddd<input type="radio" name="where" value="1"'.($where==1?' ':null).'></label>';
echo "</div>";
////echo'<input type="submit" value="Поиск" />';
echo'</form>';

echo "</div>";






css
   .search-bar { 
position: relative;
width: 300px;
}

.search-bar input {

width: 100%;
margin:0 !important;
padding: 10px 10px 10px 40px !important;

border: 1px solid var(--border-color) !important;

border-radius: 8px;

background: #fafafa;

font-size: 14px;

transition: var(--transition);


{

position:absolute;
top:0;
right:0;
background-color: green;
color: white;
border:solid 1px red;
display:inline;
}

}
20260411142220.png
20260411142220.png 48.6 Kb ⬇ 34

________
посл. ред. 11.04.2026 в 14:25; всего 1 раз(а); by pyrokinesis
php
   <div class="search-bar"> 
<form method="post" action="/blog/search.php?go">
<?php $search = htmlspecialchars(stripcslashes($search)); ?>

<input type="text" name="search" maxlength="64" value="<?php echo $search; ?>" placeholder="Поиск без ограничений...">

<div class="radio-group">
<label>
<input type="radio" name="where" value="2" <?php echo ($where == 2 ? 'checked' : ''); ?>>
<span>Вариант 1</span>
</label>
<label>
<input type="radio" name="where" value="1" <?php echo ($where == 1 ? 'checked' : ''); ?>>
<span>Вариант 2</span>
</label>
</div>

<button type="submit">Поиск</button>
</form>
</div>


css
   .search-bar { 
width: 300px;
margin: 20px auto;
}

/* Поле ввода */
.search-bar input[type="text"] {
width: 100%;
box-sizing: border-box; /* Чтобы padding не раздувал ширину */
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
margin-bottom: 10px;
}

/* Контейнер для радиокнопок */
.radio-group {
display: flex;
gap: 15px; /* Расстояние между кнопками */
align-items: center;
margin-bottom: 10px;
}

/* Выравнивание текста и кружочка внутри label */
.radio-group label {
display: flex;
align-items: center;
font-size: 14px;
cursor: pointer;
}

.radio-group input[type="radio"] {
margin-right: 5px; /* Отступ от кружка до текста */
cursor: pointer;
}

/* Кнопка отправки */
.search-bar button {
width: 100%;
padding: 10px;
background-color: green;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
Hat-Trick , спасибо большое , за заморочку , выручил с меня +
Лучший ответ
pyrokinesis , на будущее: ctrl+shift+i и далее сменяешь margin/padding как нужно
У этих кнопок есть косяк я сам с этим ставкивался не раз, для решения этой проблемы я использую допомнительный див или ботстрап.
AbaloN , мне помогли , в итоге сам догадался . и сделал из инпут радио кнопками хи , буду дальше химичить , над оформить красиво только
20260412072858.png
20260412072858.png 114.8 Kb ⬇ 32
pyrokinesis (12 апр 2026, в 7:30)
AbaloN , мне помогли , в итоге сам догадался . и сделал из инпут радио кнопками хи , буду дальше химичить , над оформить красиво только
Так не красиво.
AbaloN , та отож это я только эксперементирую ))
pyrokinesis , надеюсь сделаешь нормальные кнопки
AbaloN , ага потом напишу оценишь , хочу знать оценку
Онлайн: 5
Время:
Gen. 0.1086
(c) Bym.Guru 2010-2026