如何在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

根據這個答案，它是這樣說的：

在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

如果要將它們增大很多，例如對於多行輸入，則可能要使用textarea標簽而不是input標簽。 這使您可以在textarea上放入所需的行數和列數，而不會弄亂css（例如<textarea rows="2" cols="25"></textarea> ）。

文本區域默認情況下可調整大小。 如果要禁用該功能，只需使用resize css規則：

#signin textarea {
    resize: none;
}

一個有關默認文本的問題的簡單解決方案是使用占位符屬性，該默認文本在用戶單擊時消失。 這同樣適用於<input>標簽。

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

當用戶輸入信息而不是單擊時，該文本將消失，但這是此類操作的常用功能。

Answer 3

可以做到這一點：

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

}

Answer 4

嘗試這個：

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

Answer 5

有很多選項可以改變輸入框的高度。 填充，字體大小，高度都可以做到這一點。 這些的不同組合會產生具有不同樣式的較高的輸入框。 我建議僅更改字體大小（以及外觀的字體系列）並添加一些填充以使其更高甚至更有吸引力。 我將為您提供所有三種樣式的示例：

#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

.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中添加這些size和height屬性，因為CSS可以處理這些屬性。 我制作了一個可用於多個輸入框的類文本框