HTML / CSS 如何将图像图标添加到 input type="button"？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2920076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML / CSS How to add image icon to input type="button"?
提问by Brett
I'm using the below CSS, but it puts an image in the center of the button. Any way to left or right align an icon using <input type="button">, so that the text and the image fit and align nicely?
我正在使用下面的 CSS，但它在按钮的中心放置了一个图像。有什么方法可以使用左对齐或右对齐图标<input type="button">，以便文本和图像很好地匹配和对齐？
background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;
回答by Delan Azabani
If you absolutely must use input, try this:
如果你绝对必须使用input，试试这个：
background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;
It's usually a little easier to use a buttonwith an imginside:
使用button带有img内部的a 通常更容易一些：
<button type="submit"><img> Text</button>
However the browser implementations of buttonfor submitting are inconsistent, as well as the fact that all button values are sent when buttonis used - which kills the "what button clicked" detection in a multi-submit form.
然而，buttonfor buttonsubmit的浏览器实现是不一致的，以及所有按钮值都在使用时发送的事实- 这会杀死多提交表单中的“点击了什么按钮”检测。
回答by sshow
This should do do what you want, assuming your button image is 16 by 16 pixels.
这应该做你想做的，假设你的按钮图像是 16 x 16 像素。
<input type="button" value="Add a new row" class="button-add" />
input.button-add {
background-image: url(/images/buttons/add.png); /* 16px x 16px */
background-color: transparent; /* make the button transparent */
background-repeat: no-repeat; /* make the background image appear only once */
background-position: 0px 0px; /* equivalent to 'top left' */
border: none; /* assuming we don't want any borders */
cursor: pointer; /* make the cursor like hovering over an <a> element */
height: 16px; /* make this the size of your image */
padding-left: 16px; /* make text start to the right of the image */
vertical-align: middle; /* align the text vertically centered */
}
Example button:
示例按钮：
Update
更新
If you happen to use Less, this mixin might come in handy.
如果你碰巧使用 Less，这个 mixin 可能会派上用场。
.icon-button(@icon-url, @icon-size: 16px, @icon-inset: 10px, @border-color: #000, @background-color: transparent) {
height: @icon-size * 2;
padding-left: @icon-size + @icon-inset * 2;
padding-right: @icon-inset;
border: 1px solid @border-color;
background: @background-color url(@icon-url) no-repeat @icon-inset center;
cursor: pointer;
}
input.button-add {
.icon-button("http://placehold.it/16x16", @background-color: #ff9900);
}
The above compiles into
以上编译成
input.button-add {
height: 32px;
padding-left: 36px;
padding-right: 10px;
border: 1px solid #000000;
background: #ff9900 url("http://placehold.it/16x16") no-repeat 10px center;
cursor: pointer;
}
回答by Ferdiyan Syah
<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>
I hope this helps you.
我希望这可以帮助你。
回答by Jake Cattrall
If you're using spritesheets this becomes impossible and the element must be wrapped.
如果您使用 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;
}
Check out this fiddle: http://jsfiddle.net/AJNnZ/
看看这个小提琴：http: //jsfiddle.net/AJNnZ/
回答by bilal
Simply add icon in button element here is the example
只需在按钮元素中添加图标，这里就是示例
<button class="social-signup facebook">
<i class="fa fa-facebook-official"></i>
Sign up with Facebook</button>
回答by Vuong Passion
you can try insert image inside button http://jsfiddle.net/s5GVh/1415/
您可以尝试在按钮内插入图像 http://jsfiddle.net/s5GVh/1415/
<button type="submit"><img src='https://aca5.accela.com/bcc/app_themesDefault/assets/gsearch_disabled.png'/></button>
回答by upvote
you can try this trick!
你可以试试这个技巧！
1st) do this:
1）这样做：
<label for="img">
<input type="submit" name="submit" id="img" value="img-btn">
<img src="yourimage.jpg" id="img">
</label>
2nd) style it!
2）风格吧！
<style type="text/css">
img:hover {
cursor: pointer;
}
input[type=submit] {
display: none;
}
</style>
It is not clean but it will do the job!
它不干净，但它可以完成工作！
回答by Giuseppe Costanzo
This is the minimal style needed, fitting the image to the default button size:
这是所需的最小样式，使图像适合默认按钮大小：
<input type="button" value=" " style="background-image: url(http://www.geppoz.eu/geppoz.png);background-size:100% 100%;">the "spaced" value is needed to keep baseline alignment, just in case you need it...
需要“间隔”值来保持基线对齐，以防万一你需要它......
回答by mtjmohr
sshow's answer did it for me, too:
sshow 的回答也为我做了：
navigation.css:
导航.css：
[...]
.buttonConfiguration {
width: 40px;
background-color: red; /* transparent; */
border: none;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: corbel;
font-size: 12px;
font-weight: normal;
margin: 1px 1px;
cursor: pointer;
background-image: url('../images/icons5/gear_16.png');
background-position: center; /* 0px 0px; */
background-repeat: no-repeat;
vertical-align: middle;
}
[...]
frameMenu.php:
框架菜单.php:
[... PHP, Javascript and HTML code ...]
<!-- <li><a target="frameBody" href="admin/conf/confFunctions.php"><input type="button" class="buttonSuperAdmin" value="<?= $oLanguage->getExpression('confSettings', 'title', 'C e n t e r s') ?>"></a> -->
<li><a target="frameBody" href="admin/conf/confFunctions.php"><input type="button" class="buttonConfiguration" value=""></a>
<ul>
<li><a target="frameBody" href="admin/conf/getglobals.php "><input type="button" class="buttonSuperAdminSub" value="<?= $oLanguage->getExpression('centerSettings', 'confAdmin1', 'GetGlobals') ?>"></a></li>
<li><a target="frameBody" href="admin/conf/getcwd.php "><input type="button" class="buttonSuperAdminSub" value="<?= $oLanguage->getExpression('confSettings', 'centerAdmin2', 'GetCWD') ?>"></a></li>
</ul>
</li>
[...]
I have tested this successfully under the lastest versions of Firefox and Chrome (as of February 9th, 2019).
我已经在最新版本的 Firefox 和 Chrome 下成功测试了这一点（截至 2019 年 2 月 9 日）。
回答by Andrew
This works well for me, and I'm handling hover and click CSS as well (by changing background color):
这对我来说效果很好，我也在处理悬停和单击 CSS（通过更改背景颜色）：
HTML (here showing 2 images, image1 on top of image2):
HTML（此处显示 2 张图片，图片 1 位于图片 2 之上）：
<button class="iconButton" style="background-image: url('image1.png'), url('image2.png')"
onclick="alert('clicked');"></button>
CSS (my images are 32px X 32px, so I gave them 4px for padding and a 5px border rounding):
CSS（我的图像是 32px X 32px，所以我给了它们 4px 的填充和 5px 的边框舍入）：
.iconButton {
width: 36px;
height: 36px;
background-color: #000000;
background-position: center;
background-repeat: no-repeat;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
}
.iconButton:hover {
background-color: #303030;
}
.iconButton:active {
background-color: #606060;
}
button::-moz-focus-inner {
border: 0;
}
