按钮样式

如果我使用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

回答