样式标签和输入标签相同

Question

我想将 a 和 input 的样式设置为相同，但在输入或其他内容周围有一种填充。我该如何解决这个问题？ Fiddle 下面。

我正在使用 Firefox

输出：

HTML:

<input type="button" value="lala" />
<a>lala</a>

CSS:

input{
    padding: 0;
    margin: 0;
    margin-left: 30px;
    border-spacing: none;
    background: none;
    box-shadow: none;
    border: none;

    float: left;
    background-color: #005f83;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 12px;
    box-sizing: content-box;
}
a{
    margin-left: 30px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    float: left;
    background-color: #005f83;
    color: #fff;
    box-sizing: content-box;
}

这个 fiddle 我猜解释了一切：

http://jsfiddle.net/bqhL9fej/

我尝试了很多，但没有任何效果。我希望我的 <input> 看起来与 <a> 一样，而不是相反。有解决办法吗？

Answer 1

除了光标外，它们在我看来是一样的。

为此，将 cursor:pointer 添加到 'a' 样式

这里要遵循的安全做法是：

input{
    padding: 0;
    margin: 0;
    margin-left: 30px;
    border-spacing: none;
    background: none;
    box-shadow: none;
    border: none;
}

a, input {
    margin-left: 30px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    float: left;
    background-color: #005f83;
    color: #fff;
    box-sizing: content-box;
    cursor:pointer;
}

input::-moz-focus-inner {
    padding: 0;
    border: 0
}

Answer 2

添加这个，它将删除 Firefox 中的内边距和边框

input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

样式标签和输入标签相同

style a tag and input tag the same

html

css

styles

input