如何更改按钮CSS属性

Question

我有一个提交按钮，它具有位于窗体底部的图像。该图像位于页面的其他部分，但该按钮不需要它，而是需要更改为纯黑色按钮。我怀疑有一个孩子/家长问题阻止我做我需要的事情。我尝试在.css文件上上下移动某些样式以尝试覆盖层次结构，但没有任何效果。我是整个Web开发游戏的新手，想要简单地了解如何做到这一点的解释。谢谢。

编辑：可能有一些代码是在重写我在这里显示的CSS文件中的其他地方。我会放一个网址，而不是放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

添加以下代码附近的CSS文件的顶部.. 。

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

它现在看起来完全是我需要它看。

Answer 2

在#signup-form button附加：

padding: 0; 
border: none; 

Answer 3

什么是按钮中的<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 4

看起来细确。我会建议一些改变您的标记：

• 删除p标签，并更换由语义上更正确ul
• 去除双span你button内，并尝试与box-shadow

才达到的效果

这是我的代码是什么样子：http://jsfiddle.net/nfdvm/

注意，CSS3代码仍然需要前缀，应在Chrome做工精细，虽然

你能表明你希望看到什么不同，会导致你的问题对我来说并不很清楚......