Как разъединить 2 элемента в input?

Question

[Валерий Мадьяров]

Привет всем!

Столкнулся с детской проблемой, но не могу решить.



Нужно что бы чек бокс был справа от надписи "Ваш город" пример кода ниже!

<div class="input">
                            <input type="hidden" name="address" required>
                                    <select class="form-select" size="1" aria-label="size 1 select example" name="address">
                                    <option value="Нур-Султан" selected>Нур-Султан</option>
                                    <option value="Караганда">Караганда</option>
                            </select>
                            <span>Ваш город</span>
                         </div>

form .input {
    position: relative;
    border-bottom: 1px solid #88C3DC;
    margin-bottom: 30px;
}

Comments

[Максим]

какой чекбокс ? что он должен делать ?

Answer 1

[approximate solution]

Вы бы еще просто скинули картинку, а не огрызок кода. Код надо кидать > вся форма на codepen.

У вас верстка говно. Не надо вкладывать в инпуты select, учитывая то что каждый из них выполняет свою задачу.

Для того что бы сделать такой селект, вы берете label, в него прописываете текст, и select либо выравниваете флексами по правой стороне, либо задаете position: absolute; right: 0;

Перед этим предварительно задав label position: relative

Comments

[Валерий Мадьяров]

<form class="" id="sotrudnichestvoWrite">

                        <div class="form__success">
                            <h2>Спасибо</h2>
                            <p>Ваша заявка уже отправлена в работу менеджеру. </p>
                        </div>


                        <div class="input">
                            <input type="text" name="name" required>
                            <span>Ваше имя</span>
                        </div>
                        <!--  -->
                        <div class="input">
                            <input type="text" name="phone" required>
                            <span>Номер телефона</span>
                        </div>

                       <div class="input">
                                <input type="hidden" name="address" required>
                                    <select class="form-select" size="1" aria-label="size 1 select example" name="address">
                                    <option value="Нур-Султан" selected>Нур-Султан</option>
                                    <option value="Караганда">Караганда</option>
                            </select>
                            <span>Ваш город</span>
                         </div>
                         
                        
                        <input type="hidden" name="utm_source" value="<?php echo $_GET['utm_source']; ?>">
                        <input type="hidden" name="utm_medium" value="<?php echo $_GET['utm_medium']; ?>">
                        <input type="hidden" name="utm_campaign" value="<?php echo $_GET['utm_campaign']; ?>">
                        <input type="hidden" name="utm_content" value="<?php echo $_GET['utm_content']; ?>">
                        <input type="hidden" name="utm_term" value="<?php echo $_GET['utm_term']; ?>">
                        <button class="btn btn_blue" type="submit">Отправить</button>
                    </form>

Попробую сделать по твоему, ну год говно, даже спорить не буду. Я его не писал.

[approximate solution]

Валерий Мадьяров, Получилось? Или помогать?

[Валерий Мадьяров]

approximate solution, Все получилось друг!! )) спасибо просто span заменил на label ,все сразу встало как надо, щас только по красоте оформить.

[approximate solution]

Валерий Мадьяров, Отлично. Хорошего дня.