Question

我有一个提交按钮，其图像位于表单的底部。该图像位于页面的其他部分，但是按钮不需要它，而是需要将其更改为纯黑色按钮。我怀疑有一个孩子/父母问题妨碍了我做我需要的事情。我尝试在.css文件上上下移动某些样式以尝试覆盖层次结构，但没有任何作用。我是整个Web开发游戏的新手，想要了解如何执行此操作的简单说明。谢谢。

编辑：可能有一些代码在CSS文件的其他地方覆盖了我在此处显示的内容。我会放一个URL，而不是放300行代码，看看是否能帮助你帮助我。再次感谢您帮助网络菜鸟。

网址：https://crux.baker.edu/~jbachm01/CHAMPS/SideKick%20Main%20Files/sidekick/

HTML

<div class="grid_4">
      <div id="signup-form" class="clearfix">
        <h2>Sign Up With US...its free!</h2>
        <form action="">
          <p>
            <label>Name</label>
            <input name="" type="text" />
          </p>
          <p>
            <label>Email</label>
            <input name="" type="text" />
          </p>
          <p>
            <label>Phone Number</label>
            <input name="" type="text" />
          </p>
          <p>
            <label>Additional Information</label>
            <input name="" type="text" />
          </p>
          <p class="last">
            <button type="submit" class="button"><span>SUBMIT</span></button>
          </p>
        </form>
      </div>
    </div>

CSS

#signup-form {
padding: 15px;

/* 
width: 200px;
height: 400px;
FIX FORM SIZE HERE!!!
*/

}
#signup-form h2 {
text-align: center;
font-size:24px;
font-weight: normal;
text-transform:uppercase;
width:100%;
padding: 0 15px;
margin: 0 -15px 25px;
background: url(../images/line.png) repeat-x left bottom;
padding-bottom:10px;
}
#signup-form label {
font-size:16px;
display: block;
margin-bottom:10px;
line-height:1;
}
#signup-form input[type=text], #signup-form textarea {
background-color:#fff;
border: none;
border-top: solid 3px #bababa;
width:250px;
padding: 9px 10px;font-size:14px;
}
#signup-form p.last {
margin-bottom: 0;
}
#signup-form button, #signup-form button > span {
display: block;
width:100%;
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#signup-form button > span {
background-color:rgba(0, 0, 0, 0.5);
font-size:16px;
text-align:center;
line-height: 68px;
}

JSFIDDLE：http://jsfiddle.net/ynYy7/

Answer 1

在#signup-form button添加：

padding: 0;
border: none;

Answer 2

按钮中的<span>标签是什么？你的代码：

<button type="submit" class="button"><span><span>SUBMIT</span></span></button>

这可能只是：

<button type="submit" class="button">SUBMIT</button>

至于将按钮设为黑色（或者更确切地说，是当前的半透明黑色），您的CSS可能是这样的：

#signup-form button {
background-color:rgba(0, 0, 0, 0.5);
display: block;
width: 100%;
font-size:16px;
text-align:center;
line-height: 68px;
}

在这里小提琴：http://jsfiddle.net/T7j7P/

Answer 3

看起来确实很好。我建议对你的标记进行一些更改：

删除p代码，并在语义上更正确ul
移除span中的双button，并尝试使用box-shadow

这就是我的代码：http://jsfiddle.net/nfdvm/

请注意，css3代码仍然需要加前缀，但在Chrome中可以正常工作

你能指出你想要看到的不同吗，因为你的问题对我来说不是很清楚......

Answer 4

我在CSS文件顶部附近添加了以下代码...

#signup-form, .link-more {
background: url(../images/form_background.jpg);
}

现在看起来我需要它看起来如何。

如何更改按钮CSS属性

4 个答案: