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

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

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

Вот ссылка на мой сайт: 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  
}

Жаль, что это боль, но также как добавить в нее текст? но когда пользователь щелкает в поле, исчезает? Спасибо за вашу помощь!

Ответы

Ответ 1

В соответствии с ответом this, вот что он говорит:

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

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;" .....>

Ответ 2

Если вы хотите сделать их намного больше, например, для нескольких строк ввода, вы можете использовать тег textarea вместо тега input. Это позволяет вам указать желаемое количество строк и столбцов в текстовой области, не связываясь с 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>

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

Ответ 3

Это будет сделано:

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

}

Ответ 4

Попробуйте следующее:

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

Ответ 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;
}

Ответ 6

.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. Я создал текстовое поле класса, которое можно использовать для нескольких ящиков ввода