CSS Submit Form看起來不像應該

我試圖改變提交按鈕，但它不能正常工作。CSS Submit Form看起來不像應該

在CSS

我有我的按鈕，它工作得很好：

.button { 
    float: left; 
    clear: both; 
    display: block; 
    width: 150px; 
    padding: 4px 0 5px 0; 
    text-align: center; 
    background: url(images/button_01.jpg) no-repeat; 
    color: #000000; 
    font-size: 14px; 
    font-weight: bold; 
    text-decoration: none; 
}

然後我創建提交類型（很明顯的代碼是一樣的）：

input[type="submit"]{ 
    float: left; 
    clear: both; 
    display: block; 
    width: 150px; 
    padding: 4px 0 5px 0; 
    text-align: center; 
    background: url(images/button_01.jpg) no-repeat; 
    color: #000000; 
    font-size: 14px; 
    font-weight: bold; 
    text-decoration: none; 
}

現在

如果我創建一個HTML頁面：

<div class="button"> <a> Check Availability</a></div> 

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

<input type="submit" value="Submit" class="button" /> 
<div class="button"> <a> whats up</a></div>

有很大的不同在appeareance。所有按鈕必須看起來像第一個按鈕和第四個按鈕。我不明白爲什麼提交按鈕有這個邊框。下面是截圖： Screenshot

Any ideas guys how can i fix it ?

來源

2014-03-31 Nick Donovan

如果你只是想刪除邊框，那麼你可以簡單地添加'邊框：0;'... – Digzol

要樣式兩種完全不同的元素這就是爲什麼它們看起來不同。 input元素具有div和a元素不具有的默認樣式。

您需要檢查元素並查看哪些默認樣式需要覆蓋。基於關閉您的截圖，我猜想，這樣的事情可能會爲邊界工作：

input[type="submit"]{ 
    ... 
    border:none; 
}

http://jsfiddle.net/rD2Jz/

來源

2014-03-31 19:48:17

現在它變得更好:)謝謝男人:) –

-1

我不能評論德萊頓的回答所以我就補充一點：

你正在設計的元素可能已經添加了一些風格，這是混合的東西。確保你的css文件是在頁面上被調用的最後一個，所以它所做的更改是那些數字。

祝你好運！

來源

2014-03-31 19:53:31 marcospgp

我想有默認樣式需要被覆蓋..謝謝。 –

當你指定一個元素，比如你正在爲input type = submit設計樣式時，它會覆蓋類的規則，所以你將不得不標準化他們所有的輸入type = submit，然後用另外的樣式來設置每個類的樣式規則。

就你的情況而言，你可以簡單地在輸入type = submit的樣式中放一個邊框：0 none，即所有提交的邊框都會消失。

這裏是一個我描述了具有作爲深使用樣式作爲輸入[類型=「提交」]沒有適當的繼承一點在鏈路更優化http://zip.net/bhmYLW

避免代碼，這可能會導致很多問題。

來源

2014-03-31 20:53:52 Carra

CSS Submit Form看起來不像應該

回答

相關問題