1 
<input type="submit"/>

<style>
input {
  background: url(tick.png) bottom left no-repeat;
  padding-left: 18px;
}
</style>

但是斜面消失了，我怎样才能添加一个图标来提交按钮并保持斜面？
编辑：我希望它看起来像浏览器的默认设置。

4

5 回答 5

2

根据您使用的浏览器/操作系统，使用带有背景的 <.input type="submit" /> 看起来会有所不同。

如果要保留浏览器样式，可以使用 button 元素，它允许 HTML 位于标签内：

<button type="submit"><img src="image.gif" /> Text</button>
or 
<button type="submit"><span class="icon"></span> Text</button>
于 2008-10-23T13:38:33.440 回答
1

您可以使用边框样式开始：

边框：2px 开头#cccccc；

于 2008-10-23T13:09:44.077 回答
1

对于真正的按钮效果，我还喜欢引入悬停或焦点样式。与@Roburg 提到的类似，我通常会执行以下操作：

input#button {
    border: 2px outset rgb(0, 0, 0);
}

input#button:focus {
    border: 2px inset rgb(0, 0, 0);
}

这会产生按钮已被按下的错觉，即使它本身不是真正的按钮。

于 2008-10-23T13:14:14.787 回答
1

我的旧商店过去常常使用 input type="image" 语法——它作为提交工作。正如我最喜欢的扑克玩家之一喜欢说的那样，“宝贝，你可以吃到饱！” - 任何你想作为图形放在那里的东西。

于 2008-10-23T13:21:25.537 回答
0

使用边框。例如：

INPUT.button {
    BORDER-RIGHT: #999999 1px solid;
    BORDER-TOP: #999999 1px solid;
    FONT-SIZE: 11px;
    BACKGROUND: url(tick.png) bottom left no-repeat;
    BORDER-LEFT: #999999 1px solid;
    CURSOR: pointer;
    COLOR: #333333;
    BORDER-BOTTOM: #999999 1px solid
}

<input type="submit" class="button" />
于 2008-10-23T13:08:18.150 回答