HTML/CSS如何将图像图标添加到input type ="button"？
我正在使用下面的CSS,但它将图像放在按钮的中心.使用左右对齐图标的任何方式<input type="button">,以便文本和图像很好地匹配和对齐？
background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;
Del*_*ani 139
如果你绝对必须使用input,试试这个:
background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;
它通常是一个比较容易使用button与img内:
<button type="submit"><img> Text</button>
然而,button用于提交的浏览器实现是不一致的,以及在button使用时发送所有按钮值的事实- 这在多提交表单中杀死了"点击了什么按钮"检测.
- IE的`<按钮>的"手推车"部分'执行来自以下事实:1)上的POST/GET,其提交的"价值"为每个按钮,而不仅仅是一个点击,和2)而不是发送实际的`value`属性,IE喜欢发送按钮的内容(内部HTML).如果采取的操作取决于用户点击的按钮,这些事实使得`<button>`标签不可靠. (8认同)
- 你可以互换地使用`<button>`和`<input type = button>`.如果您不想在IE中提交<button>,请将其类型设置为:`<button type ="button"> Text </ button>` (3认同)
ssh*_*how 74
假设您的按钮图像是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 */
}
示例按钮:
更新
如果您碰巧使用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;
}
- 不,我们没有.http://stackoverflow.com/questions/2168855/css-url-are-quotes-needed (2认同)
小智 9
<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>
我希望这可以帮助你.