调整窗体大小的CSS/HTML文本区域

如何使Comment部分中的文本区域与区域不仅一行一样大而且从该区域的中间开始而不是中间开始。 Here是代码的链接。调整窗体大小的CSS/HTML文本区域

HTML

<body bgcolor="#00BCD4"> 

    <div> 
    <h1>Contact me</h1> 

    <form action="MAILTO:[email protected]" method="post" enctype="text/plain"> 
     <label for="name"><font face="Roboto"><font color="red">*</font>Name</font> 
      </label> 
     <input type="text" name="name" required> 
     <br> 
     <label for="email"><font face="Roboto"><font color="red">*</font>E-mail</font> 
      </label> 
     <input type="text" name="mail" required> 
     <br> 
     <label for="comment"><font face="Roboto"><font color="red">*</font>Comment</font> 
      </label> 
     <input type="text" name="comment" style="height:220px;"> 
     <input type="submit" value="Send"> 
     <input type="reset" value="Reset"> 
    </form> 
    <h2>or you can contact me in game @</h2> 
    </div> 

    </body>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700); 
@import url(https://fonts.googleapis.com/css?family=Roboto); 
input[type=text], 
select { 
    width: 100%; 
    padding: 12px 20px; 
    margin: 8px 0; 
    display: inline-block; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
    font-family: 'Roboto', sans-serif; 
} 

input[type=submit] { 
    width: 30%; 
    background-color: #4CAF50; 
    color: white; 
    padding: 14px 20px; 
    margin: 8px 0; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    font-family: 'Roboto Condensed', sans-serif; 
    font-size: 110%; 
} 

input[type=reset] { 
    width: 25%; 
    background-color: #f44336; 
    color: white; 
    padding: 14px 20px; 
    margin: 8px 0; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    font-family: 'Roboto Condensed', sans-serif; 
    font-size: 110%; 
} 

input[type=submit]:hover { 
    background-color: #45a049; 
} 

input[type=reset]:hover { 
    background-color: #d32f2f; 
} 

div { 
    border-radius: 5px; 
    padding: 40px; 
    margin: 0; 
} 

form { 
    width: 300px; 
    margin: 0 auto; 
} 

label { 
    font-family: 'Roboto Condensed', sans-serif; 
    font-size: 110%; 
    font-weight: bold; 
} 

h1 { 
    font-weight: bold; 
    font-family: 'Roboto Condensed', sans-serif; 
    text-align: center; 
} 

h2 { 
    font-weight: bold; 
    font-family: 'Roboto Condensed', sans-serif; 
    text-align: center; 
}

来源

2016-04-29 Titi macel

，你应该在你的表单中使用的textarea

<textarea cols="9(as u r desire)" rows="9(as u r desire)" name="comment"></textarea>

，而不是这样的：

<input type="text" style="height:220px;" >

来源

2016-04-29 09:41:07

这是一个快速的。反正有我的upvote！ –

只需使用<textarea></textarea>而不是<input type="text">。

来源

2016-04-29 09:42:27 jamiestraw

调整窗体大小的CSS/HTML文本区域

回答

相关问题