HTML - 造型表單按鈕

我正在嘗試爲我的表單設計我的提交按鈕。我正在查看「按鈕」標籤，並添加了我的CSS樣式，但該按鈕仍然有一個可怕的默認樣式。HTML - 造型表單按鈕

這是我到目前爲止有：

<button name="visit_return_button" id="visit_return_button" type="submit" class="visit_return_button"> 
Increase 
</button>

我的css樣式是工作，但我也得到一個討厭的邊框和背景顏色。我也在研究JavaScript，但我不喜歡這樣的想法，即並非所有瀏覽器都具有JS活動。

下面是按鈕的圖像，最上面的一個是什麼樣子，底部一個就是它的假設看起來像：

enter image description here

這裏是我的CSS：

#visit_return_button{ 
    width:90px; 
    height:30px; 
    position:absolute; 
    background-image: url(image/build_button.png); 
    background-repeat: no-repeat; 
    /*font-family: Tahoma, Geneva, sans-serif;*/ 
    font-size: 14px; 
    font-weight: normal; 
    color: #FFF; 
    text-align: center; 
    /*margin: auto;*/ 
    padding-top: 10px; 
    margin-top:-20px; 
}

希望得到任何幫助，感謝

來源

2012-04-15 Oliver Jones

請提供您的css – pduersteler 2012-04-15 17:57:10

您能否告訴我們您使用的瀏覽器？不同的瀏覽器在設計按鈕樣式時有不同的障礙需要克服。另外，如果沒有截圖，「可怕」和「討厭」並不是很好的描述。 – 2012-04-15 17:58:46

我已更新我的問題，對此感到抱歉。而且我使用的是鉻合金，它在safari中也是這樣做的 – 2012-04-15 18:06:03

你可以很容易地通過CSS3邊框半徑屬性讓你的按鈕： -

CSS

#visit_return_button{ 
    background-color:#9C8C42; 
    border: 2px solid #91782c; 
    color: #FFF; 
    text-align: center; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    padding: 10px; 
    }

HTML

<button id="visit_return_button" type="submit">Increase</button>

演示： - http://jsfiddle.net/VY8xs/3/

來源

2012-04-16 08:57:20

-2

圖書館往往是一致的跨多個瀏覽器類型風格的按鈕很好的解決方案。退房jQuery buttons，YUI Buttons，還有很多others。

來源

2012-04-15 18:09:14

只爲一個簡單的按鈕添加java-script是荒謬的 – Hawken 2012-04-15 18:12:58

要麼試圖隱藏border像border:0;和調整的背景，以適應您的需要或不使用背景圖片，並嘗試用純CSS和border-radius這似乎是一個更好的想法去做。見http://jsfiddle.net/qVkRs/1/

來源

2012-04-15 18:10:56 worenga

'padding：0; line-height：30px;' – 2012-04-15 18:17:03

updated http://jsfiddle.net/qVkRs/1/ – worenga 2012-04-15 18:18:41

首先，你想爲你的按鈕做一個全局樣式，否則你將不得不將這些樣式應用到每一個按鈕id，這將是很多重複的CSS。然後將您的背景樣式改爲如下所示。之後，您可以調整其餘部分以使其看起來正確。

input[type="button"], input[type="submit"], button 
{ 
    background: none; 
    background-image: url(image/build_button.png); 
    background-position: center center; 
    background-repeat: no-repeat; 
    border: 0px; 
    /* add the rest of your attributes here */ 
}

這會將這些樣式應用於整個站點的所有按鈕。如果您需要將其他樣式應用於特定按鈕或覆蓋以上某些內容，請使用該ID並將其放在以上代碼的下面。還要去掉按鈕標籤上的class =「」屬性，您不需要它，並且我們可以看到它沒有被使用。希望這可以幫助。祝你好運！

來源

2012-04-15 18:18:23 Ricketts

我認爲你正試圖刪除邊框。這是可以做到的：

border:none;

我把這裏整理了原有的CSS的自由：

#visit_return_button{ 
    width:90px; 
    height:30px; 
    font:14px Tahoma, Geneva, sans-serif; 
    background:url(image/build_button.png) no-repeat; 
    color:#fff; 
    text-align:center; 
    border:none; /* removal of border */ 
}

此外，如果這是一種形式，它是更好地使用：

<input type="button" value="Increase"/>

按鈕;和：

<input type="submit" value="Increase"/>

專門用於提交按鈕。

來源

2012-04-15 18:25:09 Hawken

爲什麼'input type ='button''比'button'好？ – 2012-04-15 18:30:44

@mrlister因爲它與表單中的每個其他輸入方法一致;它也更簡潔。 ''標籤是指包含其他html元素的按鈕。請參閱：http://stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use – Hawken 2012-04-15 18:36:26

我會給你更簡潔，沒有HTML。但並非所有控件都是「輸入」元素;想想textareas，選擇，鏈接... – 2012-04-15 18:43:47

只是隱藏按鈕的邊框，並設置背景顏色

background:#ffffff url('your_image.png');

來源

2012-04-15 18:27:40 Nidis

'＃ffffff'是不必要的方式。 – Hawken 2012-04-15 18:41:18

這裏是我的解決方案;我已經測試過所有主流瀏覽器，並且它工作正常，即使沒有背景圖片。除了IE8不做圓角。

http://jsfiddle.net/uSphG/3/

我加了一些樣式屬性，以防萬一。某些功能在不同瀏覽器上具有不同的默認值。

button::-moz-focus-inner { 
padding: 0 !important; 
border: none !important; 
} 

#visit_return_button{ 
display:inline-block; 
width:90px; 
padding:0; margin:0; outline:0; 
background:#9B8C47; 
background-image: url(image/build_button.png); 
background-repeat: no-repeat; 
/*font-family: Tahoma, Geneva, sans-serif;*/ 
border:1px solid #866517; 
-moz-border-radius:0.4em; 
border-radius:0.4em; 
font-size: 14px; line-height:24px; 
font-weight: normal; 
color: #FFF; 
text-align: center; 
/*margin: auto;*/ 
}

來源

2012-04-15 18:29:43

HTML - 造型表單按鈕

回答

相關問題