按鈕樣式

如果我使用webkit-appearance：按鈕，如何更改按鈕的默認樣式。我喜歡做這樣的事情。按鈕樣式

div { 

     webkit-appearance:button 
     background: linear-gradient(180deg, rgba(145,200,242,1) 0, rgba(137,163,200,1) 100%); 

}

2014-07-18 Makeda

你有什麼問題？預期的結果是什麼？ – APAD1

你可以添加更多信息嗎？什麼是您想要選擇的ID或課程？ – MannfromReno

此外，請使用以下方式申請*大多數*主要瀏覽器; 'webkit-appearance'，'appearance'，'-moz-appearance' –

您的代碼有幾個問題。首先，不存在 - 在WebKit的面前：你需要

-webkit-appearance:button

二上-webkit-apperance:button;沒有結束的分號，並沒有瀏覽器的前綴至極的鉻梯度：

div { 

     webkit-appearance:button 
     background: linear-gradient(180deg, rgba(145,200,242,1) 0, rgba(137,163,200,1) 100%); 

}

解決您的編碼，這：

div { 

     -webkit-appearance:button; 
     background: -webkit-linear-gradient(180deg, rgba(145,200,242,1) 0, rgba(137,163,200,1) 100%); 

}

JSFiddle
此外，因爲其他人所說，如果你用外觀：按鈕;並嘗試用CSS編輯它，外觀不再起作用。如果你想要一個按鈕的外觀，使用<button>元素。

2014-07-18 15:45:10

如果你刪除了'-webkit-appearance'，你會看到漸變對外觀沒有任何影響。 – evu

如果我運行代碼，我在Chrome中沒有任何結果。我沒有看到線性漸變......（（（ – Makeda

@Makeda我在我的答案中編輯過，因此它適用於webkit。 –

這是行不通的。 -webkit-appearance用於更改某些內容的默認外觀，通常設置爲無。如果您希望它的外觀和行爲類似於默認按鈕，請使用<button>元素。否則，請移除webkit外觀，然後根據需要調整它的樣式。

2014-07-18 15:45:41 evu

這是錯誤的，外觀可以用來看起來像一個按鈕https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance –

是的，但你爲什麼要這樣做？沒有任何意義，我只有在設置爲'none'時纔會看到並使用它，如果你想讓它看起來像一個按鈕，那麼把它設置爲一個按鈕，否則它就是你想要的樣式...而對於它來說，我是對的，它不起作用，你不能設置按鈕的意義，並給它一個ag radient ... – evu

是的，你對梯度是正確的。但你說它不起作用，而且由於OP是新的，他可能認爲它根本無法完成。 –

我想你試圖選擇按鈕的方式是錯誤的。如果你想樣式普通<button>元素與你的CSS選擇器必須是如下的線性梯度：

HTML

<button>Hello World</button>

CSS

button { 
    background: linear-gradient(180deg, rgba(145,200,242,1) 0, rgba(137,163,200,1) 100%); 
}

2014-07-19 04:54:43 miimario

回答