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

时间:2008-10-23 13:03:57

标签: html css xhtml

<input type="submit"/>

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

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

5 个答案:

答案 0 :(得分:2)

使用&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>

答案 1 :(得分:1)

你可以使用border-style outset:

border:2px outset #cccccc;

答案 2 :(得分:1)

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

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

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

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

答案 3 :(得分:1)

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

答案 4 :(得分: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" />