使用2个不同的css类格式化1表单

时间:2015-06-30 07:26:40

标签: html css forms

我是新来的,非常感谢一些帮助,我正在尝试使用css格式化输入表单,但是表单有一个文本区域,我需要格式化为与表单的其余部分相同。

这是我到目前为止所做的:

<div id="login">
<h2>Data Archive</h2>
<hr/>
<form action="" method="post">
<label>HDD Name  :</label>
<input type="text" name="hdd_name" id="hdd_name" required="required"     placeholder="Please enter HDD name"/><br /><br />
<label>Date Archived  :</label>
<input type="text" name="date_archived" id="date_archived" required="required"  placeholder="Date data was archived"/><br/><br />
<label>Project Name  :</label>
<input type="text" name="project_name" id="project_name" required="required"  placeholder="Project name"/><br/><br />
<label>Client  :</label>
<input type="text" name="client" id="client" required="required"  placeholder="Client name"/><br/><br />
<label>Archived by  :</label>
<input type="text" name="archived_by" id="archived_by" required="required"  placeholder="Name of person archiving data"/><br/><br />
<label>Editor  :</label>
<input type="text" name="editor" id="editor" required="required"  placeholder="Editor name"/><br/><br />
<label>Other information  :</label>
<div class="textarea"><textarea name="other_information" id="other_information" wrap="virtual"/>Any other information</textarea><br/><br />    </div>
<input type="submit" value=" Submit " name="submit"/><br />
</form>
</div>

和CSS:

textarea{
width: 290px;
height: 75px;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
}

#login{
width:300px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 25px;
margin-top: 70px;
}

真的希望你能为我解释一下。

2 个答案:

答案 0 :(得分:0)

您需要为每个项目提供相同的CSS类。

<input class="mytextboxes" type="text" ... />
<textarea class="mytextboxes" name="other_information" ... />Any other information</textarea>

然后你可以像这样使用CSS类:

.mytextboxes{
  /* styling here */
}

这是W3学校的一个教程,可以帮助您入门 http://www.w3schools.com/cssref/sel_class.asp

答案 1 :(得分:0)

您可以使用类似这样的CSS来设置类型输入的样式。

input[type="text"] {
  /* Your styles*/
}