如何添加图像图标到输入按钮“type=”？
如何添加图像图标到输入按钮“type=”？
提问于 2010-05-27 17:58:02
我使用的是下面的CSS，但它将一个图像放在按钮的中心。有没有办法使用<input type="button">左右对齐一个图标，这样文本和图像就能很好地匹配和对齐？
background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;回答 10
Stack Overflow用户
回答已采纳
发布于 2010-05-27 18:01:02
如果你一定要使用input，试试这个：
background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;通常，使用内部带有img的button会更容易一些：
<button type="submit"><img> Text</button>然而，用于提交的button的浏览器实现是不一致的，而且在使用button时会发送所有按钮值-这会终止多提交表单中的“单击了什么按钮”检测。
Stack Overflow用户
发布于 2014-05-10 19:01:51
<button type="submit" style="background-color:transparent; border-color:transparent;">
<img src="images/button/masuk.png" height="35"/>
</button>
<button type="reset" style="background-color:transparent; border-color:transparent;">
<img src="images/button/reset.png" height="35"/>
</button>我希望这对你有帮助。
Stack Overflow用户
发布于 2013-09-04 17:35:08
如果你正在使用spritesheets，这是不可能的，元素必须被包装起来。
.btn{
display: inline-block;
background: blue;
position: relative;
border-radius: 5px;
}
.input, .btn:after{
color: #fff;
}
.btn:after{
position: absolute;
content: '@';
right: 0;
width: 1.3em;
height: 1em;
}
.input{
background: transparent;
color: #fff;
border: 0;
padding-right: 20px;
cursor: pointer;
position: relative;
padding: 5px 20px 5px 5px;
z-index: 1;
}看看这把小提琴：http://jsfiddle.net/AJNnZ/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2920076
复制相关文章
相似问题