您好,我正在尝试将CSS应用于此表单:
<form action="http://example.com/result.xml" accept-charset="UTF-8" method="get">
<div id="search-box">
Catalog Search:<br />
<input type="hidden" id="rt" name="rt" value="keyword" />
<input type="hidden" id="tp" name="tp" value="keyword" />
<input type="text" alt="Input Box for Catalog Search" maxlength="250"
size="20" id="t" name="t" value="" />
<input type="hidden" id="ft" name="ft" value="" />
<input type="hidden" id="l" name="l" value="9" />
<input type="hidden" id="d" name="d" value="2" />
<input type="hidden" id="f" name="f" value="" />
<input type="hidden" id="av" name="av" value="" />
<input type="submit" value="Search" class="form-submit" />
</div>
</form>
我正在尝试设置搜索按钮以及输入字段的样式。 我查看了整个Google搜索结果和这个网站,并一遍又一遍地发现使用这种格式来设置按钮样式:
.submit input {
color : #000;
background : #ffa20f;
border : 2px outset #d7b9c9;
}
但这根本不影响我的搜索按钮。 如何正确引用该按钮?
您的搜索按钮有一个"表单提交"类,而您的 CSS 规则正在查找一类"提交"。 如果将 CSS 规则更改为以下内容,则它应以正确的元素为目标:
.form-submit
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9;
}
您似乎错误地定位了输入。尝试使用以下 CSS,它以父元素的 ID 为目标,然后使用提交按钮。
#search-box .form-submit {
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9;
}
http://jsfiddle.net/WcVdn/
实际上,您要做的是使用类提交在容器内设置输入标签的样式。如果要设置输入类型样式,请提交。
input[type="submit"]{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9;
}