Question

我正在尝试向此表单添加样式，但由于我在搜索中有其他类似的区域（例如提交），我需要添加类以使用CSS设置此表单的样式。任何帮助将不胜感激。

<perch:form id="contact" method="post" app="perch_forms">

<perch:content id="intro" type="textarea" label="Intro" textile="true" editor="markitup"     size="m" />

<div>
<perch:label for="name">Name</perch:label>
<perch:input type="text" id="name" required="true" label="Name" antispam="name" />
<perch:error for="name" type="required">add your name</perch:error>
</div>

<div>
<perch:label for="email">Email</perch:label>
<perch:input type="email" id="email" required="true" label="Email" antispam="email" placeholder="" />
<perch:error for="email" type="required">add your email</perch:error>
<perch:error for="email" type="format">check your email</perch:error>
</div>

<div>
<perch:label for="message">Message</perch:label>
<perch:input type="textarea" id="message" required="true" label="Message" />
</div>

<div>
<perch:input type="submit" id="submit" value="Send" />
</div>

<perch:success>
<perch:content id="success" type="textarea" label="Thank you message" textile="true" editor="markitup" />
</perch:success>
</perch:form>

Answer 1

ID＆＃39;以及如何使用它们

如果你想仅仅为这个表单设置样式，你甚至不需要添加类。只需在每个CSS选择器前面加上最外层包含元素的ID。例如......

这第一行包含整个表格......

<perch:form id="contact" method="post" app="perch_forms">

请注意，上面一行有一个特定的ID ... id="contact"此ID是唯一的，ID每页只能使用一次，您也可以将它们命名为任意名称不要以数字开头。

通过使用此ID为所有CSS选择器添加前缀，您将仅影响ID附加到的元素内的元素...您提到使用input[type=submit]并更改了站点上的每个按钮。将该选择器改为：

#contact input[type=submit] { }

上面的选择器现在只会影响ID联系人中包含的提交类型的输入。重要的是要注意哈希符号 - ＃ - 指定＆＃34; ID＆＃34;在你的CSS表格中。

课程以及如何使用它们

如果您必须使用类，建议用于可能在其他地方重复使用的任何样式，那么您只需要将class="classname"添加到您希望该类应用的元素中。

例如，如果我们想要使用类更改提交按钮中文本的颜色，我们可能会这样做...

首先我们在html中添加一个类：

这...... <perch:input type="submit" id="submit" value="Send" />

成为这个...... <perch:input class="whitetext" type="submit" id="submit" value="Send" />

请注意class="whitetext"

然后在CSS中我们会写：

.whitetext { color: #fff; }

请注意，句点字符指定＆＃34;类＆＃34;在CSS表格中。

合并ID和类

您也可以将这两者甚至全部三者结合起来。这增加了你的特异性。例如......

#contact input[type="submit"].whitetext { color: #fff; }

上述选择器会将输入元素的文本颜色更改为白色，仅当输入元素的类型值为＆＃34;提交＆＃34; AND 同样的输入也必须有一个＆＃34; whitetext＆＃34; AND 输入也是ID值为＆＃34; contact＆＃34;的元素的后代。

Answer 2

设置提交按钮的样式

示例代码：

input#submit {
    color: #444444;
    text-shadow: 0px 1px 1px #ffffff;
    border-bottom: 2px solid #b2b2b2;
    background-color: #b9e4e3;
    background: -webkit-gradient(linear, left top,   left bottom, from(#beeae9), to(#a8cfce));
    background: -moz-linear-gradient(top, #beeae9, #a8cfce);
    background: -o-linear-gradient(top, #beeae9, #a8cfce);
    background: -ms-linear-gradient(top, #beeae9, #a8cfce);
}

input#submit:hover {
    color: #333333;
    border: 1px solid #a4a4a4;
    border-top: 2px solid #b2b2b2;
    background-color: #a0dbc4;
    background: -webkit-gradient(linear, left top,   left bottom, from(#a8cfce), to(#beeae9));
    background: -moz-linear-gradient(top, #a8cfce, #beeae9);
    background: -o-linear-gradient(top, #a8cfce, #beeae9);
    background: -ms-linear-gradient(top, #a8cfce, #beeae9);
}

设置输入效果

示例代码：

input {
    font-size: 120%;
    color: #5a5854;
    background-color: #f2f2f2;
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    padding: 5px 5px 5px 30px;
    background-repeat: no-repeat;
    background-position: 8px 9px;
    display: block;
    margin-bottom: 10px;
}

input:focus {
    background-color: #ffffff;
    border: 1px solid #b1e1e4;
}

input#email {
    background-image: url("images/email.png");
}

input#twitter {
    background-image: url("images/twitter.png");
}

input#web {
    background-image: url("images/web.png");
}

您可以在此处阅读更多内容Styling HTML forms 在这里Style Web Forms Using CSS

您甚至可能希望FORMOID EASIEST FORM GENERATOR使用常见表单来制作表单。

如何使用类设置HTML表单的样式？

2 个答案:

ID＆＃39;以及如何使用它们

课程以及如何使用它们

合并ID和类