Как сделать текстовое поле больше в HTML/CSS?

Question

Я не уверен, где вы редактируете код для моего вопроса, поэтому я поместил оба (извините, если это смущает кого-либо)

В правом верхнем углу находятся два текстовых поля, но я не уверен, как это сделать их больше по высоте. Пожалуйста, не могли бы вы мне помочь?

Вот ссылка на мой сайт до сих пор: http://jsfiddle.net/xiiJaMiiE/4UUgg/1/embedded/result/

#signin 
{ 
position:absolute; 
min-width:22%; 
height 20%; 
top:0%; 
right:0%; 
z-index:10; 
background-color:#CCC; 
border: 1px solid grey; 

} 
#signin input { 
background-color:#FFF 
} 

Извините быть боль, но и как добавить в него текст? но когда пользователь щелкает в поле, исчезает? Спасибо за помощь!

Answer 1

Согласно this ответ, вот что он говорит:

В JavaScript можно манипулировать свойствами DOM CSS, например:

document.getElementById('textboxid').style.height="200px"; 
document.getElementById('textboxid').style.fontSize="14pt"; 

Если вы просто хотите, чтобы указать высоту и размер шрифта , используйте атрибуты CSS или стиля, например

//in your CSS file or <style> tag 
#textboxid 
{ 
    height:200px; 
    font-size:14pt; 
} 

<!--in your HTML--> 
<input id="textboxid" ...> 

Или

<input style="height:200px;font-size:14pt;" .....> 

Answer 2

Это будет делать это:

#signin input { 
background-color:#FFF; 
min-height:200px; 

} 

Answer 3

Попробуйте это:

#signin input { 
    background-color:#FFF; 
    height: 1.5em; 
    /* or */ 
    line-height: 1.5em; 
} 

Answer 4

.textbox { 
    height: 40px; 
} 

<div id=signin> 
    <input type="text" class="textbox" size="25%" height="50"/></br> 
<input type="text" class="textbox" size="25%" height="50"/> 

сделать размер шрифта больше и добавьте высоту (или высоту строки в поля ввода) Я бы не рекомендовал добавлять эти атрибуты размера и высоты в HTML, поскольку это может обрабатываться CSS. Я создал текстовое поле класса, которое можно использовать для нескольких ящиков ввода.

Answer 5

Есть много вариантов, которые изменяли бы высоту окна ввода. padding, font-size, height, все это сделают. различные комбинации из них создают более высокие поля ввода с разными стилями. Я предлагаю просто изменить размер шрифта (и семейство шрифтов для внешнего вида) и добавить некоторые дополнения, чтобы сделать его еще более высоким и более привлекательным. Я дам вам пример все три стиля, хотя:

#signin input { 
font-size:20px; 
} 

ИЛИ

#signin input { 
padding:10px; 
} 

ИЛИ

#signin input { 
height:24px; 
} 

Это сочетание трех, которые я рекомендую:

#signin input { 
font-size:20px;font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; 
padding:10px; 
} 

Answer 6

Если вы хотите сделать это много больше, например, для нескольких строк ввода, вы можете использовать тег textarea вместо входного тега. Это позволяет вам вставлять количество строк и столбцов, которые вы хотите в текстовое поле, не возиться с css (например, <textarea rows="2" cols="25"></textarea>).

По умолчанию изменяются по размеру области текста.Если вы хотите отключить это, просто использовать изменения размера правило CSS:

#signin textarea { 
    resize: none; 
} 

Простое решение вашего вопроса о тексте по умолчанию, который исчезает, когда пользователь щелкает должен использовать атрибут заполнитель. Это будет работать и для <input> тегов.

<textarea rows="2" cols="25" placeholder="This is the default text"></textarea> 

Этот текст будет исчезать, когда пользователь вводит информацию, а не при нажатии, но это общая функциональность для такого рода вещи.