0

我有一个提交按钮，其图像位于表单底部。该图像位于页面的其他需要存在的部分，但是按钮不需要它，而是需要更改为纯黑色按钮。我怀疑有一个孩子/父母的问题阻止我做我需要的事情。我尝试在 .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/

4

4 回答 4

0

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

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

它现在看起来正是我需要的样子。

于 2013-08-06T18:47:24.873 回答
0

补充#signup-form button：

padding: 0;
border: none;
于 2013-07-30T20:18:11.707 回答
0

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

于 2013-07-30T20:19:45.307 回答
0

看起来确实不错。我建议对您的标记进行一些更改：

  • 删除p标签，并替换为语义上更正确的ul
  • 删除span你的双重button，并尝试达到效果box-shadow

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

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

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

于 2013-07-30T20:24:00.037 回答