HTML / CSS如何添加图像图标inputtypes=“button”？
我正在使用下面的CSS，但它将图像放在button的中心。 任何使用<input type="button">左右alignment图标的方法，以便文本和图像适合并很好地alignment？
background: url('/common/assetshttp://img.dovov.comicons/16x16/add.png'); background-position:center; background-repeat:no-repeat;
如果你绝对必须使用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时发送所有button值的事实 – 杀死在多提交forms中的“button被点击”检测。
这应该做你想做的，假设你的button图像是16×16像素。
<input type="button" value="Add a new row" class="button-add" />
input.button-add { background-image: url(http://img.dovov.combuttons/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 */ }
示例button：
更新
如果你碰巧使用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); }
以上汇编成
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; }
的jsfiddle
<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>
我希望这可以帮助你。
如果你使用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/
你可以试试这个技巧！
第一）做到这一点：
<label for="img"> <input type="submit" name="submit" id="img" value="img-btn"> <img src="yourimage.jpg" id="img"> </label>
第二）风格吧！
<style type="text/css"> img:hover { cursor: pointer; } input[type=submit] { display: none; } </style>
它不干净，但它会做的工作！
我会做的是做到这一点：
使用buttontypes
<button type="submit" style="background-color:rgba(255,255,255,0.0); border:none;" id="resultButton" onclick="showResults();"><img src="images/search.png" /></button>
我用background-color：rgba（255,255,255,0.0）; 这样一个button的原始背景颜色就会消失。 同边界一样：没有; 它会把原来的边界。
只需在button元素中添加图标就是这个例子
<button class="social-signup facebook"> <i class="fa fa-facebook-official"></i> Sign up with Facebook</button>
<img src="http://www.pic4ever.comhttp://img.dovov.com2mpe5id.gif"> <button class="btn btn-<?php echo $settings["button_background"]; ?>" type="submit"><?php echo $settings["submit_button_text"]; ?></button>
