目前我的页面上有很多后退按钮:
<input type="button" id="Back" value="Back" onclick="back();" class="backButton">
我需要在其中添加图标,如下所示:
答案 0 :(得分:5)
我需要在其中添加图标,如下所示:
首先,如何在文本上方添加图标并集中对齐。
您应该使用button
元素。它存在于此目的(自定义样式和标记)。但是,您无需使用background-image
。为了能够通过CSS控制所有内容,只需确保所有按钮具有相同的标记,然后使用类进行控制。
例如:
标记:
<button class="cancel">
<i></i>
<span>Cancel</span>
</button>
CSS :
button.cancel i::after {
content: '\00d7'; display: block;
font-size: 26px; font-style: normal; font-weight: 600; color: red;
}
在after
上使用i
伪元素(或span
无论如何)并根据类使用content
属性将图标作为文本插入(字形)您可以根据需要设计样式。
第二是可以仅使用CSS来实现。 (如果不是只有 对HTML的一点修改
这是非常可能的,但很麻烦。我不推荐这种方法,不值得努力。你被警告了。
要在标记中使用现有的input
而不对标记进行任何更改,您需要设置input
本身的样式,并且必须使用background-image
(实际上两个背景图片)。 input
样式有一个问题,一旦你修改它的风格就会失去它的平台风格。因此,您将丢失按钮,如行为和Windows,如按钮渐变和效果。您将不得不通过CSS复制所有功能。
例如:
标记:
<input type="button" value="Cancel" data-value="Cancel" />
CSS :
input[type=button] {
min-width: 72px; height: 64px; position: relative;
display: inline-block; vertical-align: top; padding-top: 36px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'),
linear-gradient(#f5f5f5, #dfdfdf);
background-repeat: no-repeat, no-repeat;
background-position: center 4px, center center;
background-size: 24px, auto;
border: 1px solid #aaa; border-radius: 3px;
}
input[type=button]:active {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'),
linear-gradient(#dfdfdf, #f5f5f5);
background-repeat: no-repeat, no-repeat;
background-position: center 4px, center center;
background-size: 24px, auto;
outline: 0px;
}
input[type=button]:focus { outline: 0px; }
上面的代码首先使用background-image
来显示图标,然后使用第二个background-image
来显示渐变(就像Windows平台样式一样)。它使用padding-top
向下推文本,:active
状态用于设置单击时反转渐变的行为。 :focus
说明要删除outline
。
这一切都是为了模仿button
的行为!使用button
本身要好得多。
以下是两种技术的组合演示:
小提琴:http://jsfiddle.net/abhitalks/yw7wmvwh/1/
<强>段强>:
button {
min-width: 72px; height: auto;
display: inline-block; vertical-align: top;
}
button.ok i::after {
content: '\2713'; display: block;
font-size: 23px; font-style: normal; font-weight: 600; color: green;
}
button.cancel i::after {
content: '\00d7'; display: block;
font-size: 26px; font-style: normal; font-weight: 600; color: red;
}
input[type=button] {
min-width: 72px; height: 64px; position: relative;
display: inline-block; vertical-align: top; padding-top: 36px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'),
linear-gradient(#f5f5f5, #dfdfdf);
background-repeat: no-repeat, no-repeat;
background-position: center 4px, center center;
background-size: 24px, auto;
border: 1px solid #aaa; border-radius: 3px;
}
input[type=button]:active {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Emoji_u274c.svg'),
linear-gradient(#dfdfdf, #f5f5f5);
background-repeat: no-repeat, no-repeat;
background-position: center 4px, center center;
background-size: 24px, auto;
outline: 0px;
}
input[type=button]:focus { outline: 0px; }
&#13;
<button class="ok">
<i></i>
<span>Ok</span>
</button>
<button class="cancel">
<i></i>
<span>Cancel</span>
</button>
<hr/>
<input type="button" value="Cancel" data-value="Cancel" />
&#13;
答案 1 :(得分:2)
只需将您的课程添加到css文件
.backButton{
background: url(https://cdn3.iconfinder.com/data/icons/musthave/24/Delete.png) no-repeat;
background-position:center top;
height: 40px;
width: auto;
text-align: center;
padding:24px 10px 10px 10px;
border: 1px solid #555555;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
<input type="button" id="Back" value="Back" onclick="back();" class="backButton">
答案 2 :(得分:0)
我希望这会有所帮助
<强> HTML 强>
button {
font-size: 20px;
width: 100px;
height: 100px;
}
#rock {
padding:10px;
background: url(https://upload.wikimedia.org/wikipedia/commons/6/65/Crystal_button_cancel.svg) top center ;
background-repeat: no-repeat;
background-position: 50% 10%;
}
<button id="rock" onClick="choose(1)">Cancle</button>
答案 3 :(得分:0)
HTML
<button id="btnCancel" onClick="choose(1)">Cancel</button>
CSS
button {
font-size: 20px;
width: 100px;
height: 100px;
}
#btnCancel {
padding:10px;
background: url(https://upload.wikimedia.org/wikipedia/commons/d/da/Crystal_button_cancel.png) top center ;
background-repeat: no-repeat;
background-position: 50% 10%;
border-radius : 20px;
}