設置標簽樣式和輸入標簽相同

Question

我想給a和input設置相同的樣式，但是在輸入或類似內容周圍有一種填充。 我該如何解決？ 小提琴下面。

我正在使用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;
}

這個小提琴解釋了我所有的猜測：

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;
}