[英]style a tag and input tag the same
I want to style the a
and the input
the same, but there's a kind of padding around the input or something. 我想给a
和input
设置相同的样式,但是在输入或类似内容周围有一种填充。 How do I solve this? 我该如何解决? Fiddle below. 小提琴下面。
I'm using Firefox 我正在使用Firefox
Output: 输出:
HTML: HTML:
<input type="button" value="lala" />
<a>lala</a>
CSS: 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;
}
This fiddle explains it all I guess: 这个小提琴解释了我所有的猜测:
http://jsfiddle.net/bqhL9fej/ http://jsfiddle.net/bqhL9fej/
I tried a lot but nothing works. 我尝试了很多,但是没有用。 I want my <input>
to look the same as the <a>
, NOT the other way around. 我希望我的<input>
看起来与<a>
相同,而不是相反。 Is there a solution for this? 有解决方案吗?
They looked the same to me except for the cursor. 除了光标以外,它们在我看来都一样。
For that, add cursor:pointer to the 'a' styles 为此,将cursor:pointer添加到'a'样式
Safe practice to follow here would be: 遵循的安全做法是:
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
}
Add this, it will remove inner padding and border in Firefox 添加它,它将删除Firefox中的内部填充和边框
input::-moz-focus-inner {
padding: 0;
border: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.