Как сделать так, что-бы текст начинался в самом начале, а не в середине?

Question

HTML:

<div class="qww">
    <input class="dd" type="text" placeholder="введите текст">
</div>

CSS:

.dd{ 
    border: 0;
    background: none;
    text-align: left;``
    border: 2px solid #3498db;
    padding: 5px 5px;
    width: 490px;
    height: 400px;
    outline: none;
    color: white;
    border-radius: 60px;
    transition: 0.50s;
}

.qww{
    left: 50px;
    top: 200px;
}

Answer 1

Нет никакого смысла делать громадный инпут. Для этих целей есть textarea

.dd{ 
    border: 0;
    background: none;
    text-align: left;
    border: 2px solid #3498db;
    padding: 5px 5px;
    padding-left: 50px;
    width: 490px;
    height: 400px;
    font-size: 16px;
    color: black;
    border-radius: 60px;
    transition: 0.50s;
    
}

.qww{
    left: 50px;
    top: 200px;
}

<div class="qww">
   
    <textarea class="dd"  placeholder="введите текст"></textarea>
</div>

Правда тут есть небольшая побочка: весь текст тоже будет с паддингом, как и placeholder.

Answer 2

input - однострочное поле ввода текста. Если вы задаёте этому полю размеры width: 490px; height: 400px;, вы тем самым, располагаете единственную строчку текста строго посередине, относительно рамки (по вертикали). Следует input заменить на textarea, как уже указано в ответе Алексея Шиманского.
Свойства left и top указывают блокам при position: absolute; или position: fixed;. У вас это нет, значит свойства не сработают.
Мусор в css: дважды указано свойство border, После text-align: left; следует убрать обратные кавычки. Раз у вас цвет текста указан как white - белый, а у самого блока ввода текста указано свойство background: none; - убедитесь, что у родительского элемента указан хоть какой-то фоновый цвет, иначе вы получите белый текст на белом фоне.

Доработанный код может выглядеть так:

.dd{ 
    background: none;
    text-align: left;
    border: 2px solid #3498db;
    padding: 20px;
    width: 490px;
    height: 400px;
    outline: none;
    color: white;
    border-radius: 60px;
    transition: 0.50s;
}

<div class="qww">
    <textarea class="dd" type="text" placeholder="введите текст"></textarea>
</div>

БЛОГ НА HUSL

Как сделать так, что-бы текст начинался в самом начале, а не в середине?

Ответы (2 шт):