-1

我正在尝试向此表单添加样式，但由于我在搜索中有其他类似区域（例如提交），我需要添加类以便使用 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>
4

2 回答 2

2

ID 以及如何使用它们

如果您只想设置此表单本身的样式，您甚至不需要添加类。只需在每个 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 联系人中包含的具有提交类型的输入。重要的是要注意井号 - # - 在您的 CSS 表中指定“ID”。

类以及如何使用它们

如果您必须使用类（推荐用于可能在其他地方重复使用的任何样式），那么您只需添加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; }

请注意，句点字符指定 CSS 表中的“类”。

结合 ID 和类

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

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

上面的选择器会将输入元素的文本颜色更改为白色，仅当输入元素的类型值为“提交”并且相同的输入也必须具有“whitetext”类 并且输入也是ID 值为“contact”的元素。

于 2014-07-16T18:41:21.287 回答
0

设置提交按钮的样式

示例代码：

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");
}

您可以在此处阅读更多设置 HTML 表单样式 和此处使用 CSS 设置 Web 表单样式

您甚至可能喜欢FORMOID EASIEST FORM GENERATOR来制作具有常见表单域的表单。

于 2014-07-16T18:42:19.280 回答