如何更改按鈕CSS屬性

我有一個提交按鈕，它具有位於窗體底部的圖像。該圖像位於頁面的其他部分，但該按鈕不需要它，而是需要更改爲純黑色按鈕。我懷疑有一個孩子/家長問題阻止我做我需要的事情。我嘗試在.css文件上上下移動某些樣式以嘗試覆蓋層次結構，但沒有任何效果。我是整個Web開發遊戲的新手，想要簡單地瞭解如何做到這一點的解釋。謝謝。如何更改按鈕CSS屬性

編輯：可能有一些代碼是在重寫我在這裏顯示的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/

來源

2013-07-30 Jeremiah

對我來說似乎很好......問題是什麼？ –

爲什麼你需要兩個跨度？ –

爲什麼你需要任何跨度？ – Optox

添加以下代碼附近的CSS文件的頂部.. 。

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

它現在看起來完全是我需要它看。

來源

2013-08-06 18:47:24 Jeremiah

在#signup-form button附加：

padding: 0; 
border: none;

來源

2013-07-30 20:18:11

什麼是按鈕中的<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-30 20:19:45

我能夠刪除其中一個跨度，但擺脫它們都會以更遠離我想要的方式更改按鈕。我編輯了原文，看看我是否可以稍微清理一下。謝謝。 – Jeremiah

看起來細確。我會建議一些改變您的標記：

刪除p標籤，並更換由語義上更正確ul
去除雙span你button內，並嘗試與box-shadow

才達到的效果

這是我的代碼是什麼樣子：http://jsfiddle.net/nfdvm/

注意，CSS3代碼仍然需要前綴，應在Chrome做工精細，雖然

你能表明你希望看到什麼不同，會導致你的問題對我來說並不很清楚......

來源

2013-07-30 20:24:00 Pevara

如果我用ul替換p標籤，表單元素的間距將移出重擊...並且我在表單背景中顯示的圖像不會根據需要顯示。我基本上需要的是具有普通的彩色按鈕，而不是像現在這樣具有圖像的按鈕。我會編輯我原來的帖子，看看我能否清理一下。我是網絡行業noob，所以請原諒我對某些事情的輕微無知。 – Jeremiah

如何更改按鈕CSS屬性

回答

相關問題