无法将 CSS 应用于表单答案

【问题标题】：Having Trouble Applying CSS to a form无法将 CSS 应用于表单
【发布时间】：2012-06-08 20:44:51
【问题描述】：

您好，我正在尝试将 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;
}

但这根本不会影响我的“搜索”按钮。如何正确引用该按钮？

【问题讨论】：

标签： html css forms button

【解决方案1】：

实际上，您正在尝试使用类提交在容器内设置输入标记的样式。如果您想设置输入类型的样式，请提交。

input[type="submit"]{
  color: #000;
  background: #ffa20f;
  border: 2px outset #d7b9c9;

}

【讨论】：

【解决方案2】：

您似乎错误地定位了输入。尝试使用以下以父元素 ID 为目标的 CSS，然后是提交按钮。

#search-box .form-submit {
   color: #000;
   background: #ffa20f;
   border: 2px outset #d7b9c9;
}

http://jsfiddle.net/WcVdn/

【讨论】：

【解决方案3】：

您的搜索按钮具有“form-submit”类别，而您的 CSS 规则正在寻找“submit”类别。如果您将 CSS 规则更改为以下内容，它应该针对正确的元素：

.form-submit
{
  color: #000;
  background: #ffa20f;
  border: 2px outset #d7b9c9;
}

【讨论】：

很好，领先我一分钟。我需要离开 jsfiddle 一个人大声笑
有趣的是，我认为您的答案更好，因为您包含了工作示例。