-1

На сайте есть форма (по типу регистрации : введите меил, имя, зарегистрироваться и т.п.) в ней разные кнопки и инпуты. Нужно чтобы пользователь мог менять размеры самой формы , как бы растягивая ее. при наведении на края формы(углы) курсор меняет свой вид и позволяет растягивать форму. Подскажите, пожалуйста, как это реализовать? Чистый JS

2
  • Зачем такое надо? Адаптив отменили? 17 фев 2022 в 14:17
  • Условие задания
    – Jul
    21 фев 2022 в 11:43

1 ответ 1

3

Это возможно сделать без использования JS, для этого есть специальное свойство в CSS resize

Вот небольшой пример кода:

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.form {
  padding: 10px;
  height: 200px;
  width: 300px;
  border: 1px solid black;
  
  /* Вот сюда и добавляем */
  overflow: auto;
  resize: both;
}

.form label {
  display: block margin-bottom: 5px;
}

.form input {
  display: block;
}
<form class="form">
  <label for="name">Имя</label>
  <input id="name" placeholder="Введите имя">
  <br>
  <label for="surname">Фамилия</label>
  <input id="surname" placeholder="Введите фамилию">
  <h2 style="text-align: center">Какой-то текст посредине</h2>
</form>

3
  • 1
    Классно! Спасибо большое)
    – Jul
    17 фев 2022 в 16:48
  • Принимаю благодарности!) PS: Если мой ответ является ответом на ваш вопрос, то можете поставить на него галочку :)
    – E1mir
    17 фев 2022 в 19:23
  • А как сделать чтобы скролла горизонтального не было, но при этом форма растягивалась?
    – Jul
    21 фев 2022 в 11:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.