Question

<input type="submit"/>

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

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

Answer 1

使用＆lt; .input type =“submit”/＆gt;根据您所使用的浏览器/操作系统，背景会有所不同。

如果您想保留浏览器样式，可以使用button元素，该元素允许标记内的HTML：

<button type="submit"><img src="image.gif" /> Text</button>
or 
<button type="submit"><span class="icon"></span> Text</button>

Answer 2

你可以使用border-style outset：

border：2px outset #cccccc;

Answer 3

对于真正的按钮效果，我还想介绍一种悬停或焦点风格。与@Roburg提到的类似，我通常会这样做：

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

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

这会让人觉得按钮已被按下，即使它不是真正的按钮本身。

Answer 4

我的旧商店曾经摇滚输入类型=“图像”语法 - 它作为提交。作为我最喜欢的扑克之一，人们喜欢说，“你只能吃，宝贝！” - 你想把它放在那里作为图形。

Answer 5

使用边框。例如：

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" />

CSS按钮（带/背景但需要斜角）

5 个答案: