<input type="submit"/>
<style>
input {
background: url(tick.png) bottom left no-repeat;
padding-left: 18px;
}
</style>
但是斜角消失了,我怎么能添加一个图标来提交按钮并保持斜角呢? 编辑:我希望它看起来像浏览器默认。
答案 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" />