0

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

введите сюда описание изображения

<form action="#" class="form-1" id="personal-data">
                            <fieldset form="personal-data">
                                <legend>Персональные данные</legend>
                                <div class="name form">
                                   <label for="user-name"></label>  
                                   <input type="text"  name="user-name" id="user-name" value="Заполнить ФИО">   
                                </div>
                                <div class="user-login form">
                                   <label for="user-login"></label>
                                   <input type="text"  name="user-login" id="user-login" value="Логин (изменить невозможно)">   
                                </div>
                                <div class="user-company form">
                                  <label for="user-company"></label>    
                                  <input type="text"  name="user-company" id="user-company" value="Заполнить наименование компании">    
                                </div>
                                <div class="user-position form">
                                   <label for="user-position"></label>
                                   <input type="text"  name="user-position" id="user-position" value="Выбрать должность">
                                </div>
                                <div class="user-phone-number form">
                                   <label for="user-phone-number"></label>
                                   <input type="tel"   name="user-phone-number" id="user-phone-number" value="Заполнить телефон">
                                </div>
                                <div class="user-email form">
                                    <label for="user-email"></label>
                                    <input type="email" name="user-email" id="user-email" value="Заполнить почту">
                                </div>

                                <button type="button" class="save-btn btn">Сохранить</button>
                            </fieldset>
                        </form>
2
  • Где ваш код? Что именно не получается?
    – E_K
    15 авг 2018 в 19:06
  • не получается Label поместить в сам input как изображено на скриншоте
    – Илья
    15 авг 2018 в 19:15

1 ответ 1

0

Пример

.input-container {
  display: inline-block;
  width: 100%;
  position: relative;
}

.input-container input {
  height: 50px;
  padding: 15px 20px 5px;
  width: 100%;
  box-sizing: border-box;
}

.input-container label {
  position: absolute;
  top: 5px;
  left: 20px;
  font-size: 12px;
  color: #ccc;
}
<div class="input-container">
  <label for="inputID">Text label</label>
  <input type="text" id="inputID" placeholder="Text">
</div>

3
  • Спасибо большое! Получилось
    – Илья
    15 авг 2018 в 19:24
  • Зачем label спозиционирован абсолютно?
    – E_K
    15 авг 2018 в 19:28
  • @E_K - Не совсем понимаю слово - зачем. Это один из способов позиционирования. Предложите другие вариант
    – soledar10
    16 авг 2018 в 3:29

Ваш ответ

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

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