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

Question

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

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;
 }

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

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

Answer 1

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

你可以像这样使用渐变来设置按钮样式 http://www.cssbuttongenerator.com/

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