样式标记和输入标记相同

时间:2015-01-14 15:30:26

标签: html css input styles

我希望ainput的样式相同,但输入周围有一种填充或其他东西。我该如何解决这个问题?小提琴下面。

我使用的是Firefox

输出:

example

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>相同,而不是相反。 有解决方案吗?

2 个答案:

答案 0 :(得分:2)

除了光标外,他们看起来和我一样。

为此,将光标:指针添加到'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
}

答案 1 :(得分:1)

添加此项,它将删除Firefox中的内部填充和边框

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