CSS按钮(带背景但需要斜角)

Question

<input type="submit"/>

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

但是斜面消失了，我怎么才能在提交按钮上添加一个图标并保留斜面呢？

编辑:我希望它看起来像浏览器的默认设置。

Answer 1

使用带有背景的<.input type="submit“/>将根据您所使用的浏览器/ OS的不同而不同。

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

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

Answer 2

您可以使用边框样式的开头：

边框: 2px开始#cccccc；

Answer 3

为了获得真正的按钮效果，我还喜欢引入悬停或焦点样式。与@Roburg提到的类似，我通常会这样做：

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

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

这将给人一种按钮被按下的错觉，尽管它本身并不是一个真正的按钮。