Question

Hello I am trying to apply CSS to this form:

<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>

I am trying to style the Search button and also the input fields. I have looked throughout Google search results and this site and have found over and over to use this format for styling the button:

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

But this is not affecting my Search button at all. How can I reference that button correctly?

Answer 1

Your search button has a class of “form-submit” while your CSS rule is looking for a class of “submit.” If you change your CSS rule to the following, it should target the correct element:

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