Question

在我的CSS中，CSS设计师为按钮创建了一个样式，但它只适用于href标记。

即：

a.btn {
   color:..
   border-radius: ...
   padding:..
   text-transform:..
   font-sizE:...
   -webkit-transition:..
   -moz-transition:
   -o-transition:..
   transition:..
   -webkit-border-radius:..
   -moz-border-radius:..


}

我是否可以将所有这些样式应用于input type = button元素？

Answer 1

两种可能性：

将a.btn更改为.btn，将<input />更改为<input class="btn" />
或将a.btn更改为a.btn, input[type=button]

Answer 2

改为使用a.btn, input[type=button]作为选择器。

http://jsfiddle.net/AaVLD/

Answer 3

将样式应用于按钮所需要做的就是添加第二个选择器，如下所示：

a.btn,
input[type=submit],
input[type=button],
button
{
  color:..
  border-radius: ...
  padding:..
  text-transform:..
  font-sizE:...
  -webkit-transition:..
  -moz-transition:
  -o-transition:..
  transition:..
  -webkit-border-radius:..
  -moz-border-radius:..
}

在示例中，我们使用逗号分隔不同的选择器。在这种情况下，我添加了三个选择器，一个用于提交按钮，一个用于按钮输入，一个用于按钮元素。

值得注意的是，上面的代码在Internet Explorer 6中不起作用（如果这是一个因素），但您可以以相同的方式扩展它，以便您想要样式的按钮都有一个。“btn”类通过替换只有a.btn

的.btn

Answer 4

输入类型=“按钮”元素是众所周知的问题。从理论上讲，所有现代浏览器都支持样式，但较旧的变体不支持。

您可以尝试以下内容：

<input type="button" class="btn" ...>

并将“a.btn”替换为“btn”，但您必须在所有目标浏览器中对其进行测试。（更简单）替代方法是使用<button/>标记，而使用“important”注释它实际返回的内容。它的样式设计更加灵活。

Answer 5

这应该有用。

a.btn, input[type=submit], input[type=button], input[type=reset] { ... }

（但不适用于IE6）您可以在所有情况下使用JavaScript。 http://scvinodkumar.wordpress.com/2009/12/14/inputtypesubmit-css-not-working-in-ie6/

我有一个a.btn的样式，我可以将它用作输入类型=按钮吗？

5 个答案: