html - 带有类型按钮的输入内的图标问题

Question

我有一个问题，我有 2 个按钮，您可以在下面看到。我需要添加 errorIcon 但想保持按钮 1 的外观。按钮 1 具有浏览器特定样式，我对按钮 1 没有做任何事情。

Firefox中按钮的图片

HTML：

Button1: <input type="button" value="Button1" />
Button2: <input type="button" class="errorIcon" value="Button2" />

CSS：

 .errorIcon{
    background: url("errorIcon.png") no-repeat scroll top left;
    padding-left: 10px;
    width: 10px;
 }

请注意，我不能使用下面的示例，因为它会触发我无能为力的事情。程序中的其他内容在“按钮”上运行。这个例子给了我想要的错误img的Button1。

<button><span class="errorIcon></span></button>

score 0 · Accepted Answer

您需要设置两个按钮的样式，因为您将第一个按钮保留为未设置样式，它将根据浏览器和系统改变外观。所以风格他们两个

您可以使用像这样的渐变样式按钮 http://www.cssbuttongenerator.com/

并通过 ::before 或 ::after 添加图像

1 回答 1