我希望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;
}
这个小提琴解释了我所想的一切:
我尝试了很多,但没有任何作用。
我希望我的<input>
看起来与<a>
相同,而不是相反。
有解决方案吗?
答案 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;
}