html - タイプボタンを使用した入力内のアイコンの問題

Question

問題があります。以下に示す 2 つのボタンがあります。errorIcon を追加する必要がありますが、ボタン 1 の外観を維持したいと考えています。ボタン 1 にはブラウザー固有のスタイルがあり、button1 には何もしていません。

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

以下の例は、私が何もできないことを引き起こすため、使用できないことに注意してください。プログラム内の何かが「ボタン」で実行されます。この例では、Button1 にエラー img が表示されます。

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

score 0 · Accepted Answer

両方のボタンのスタイルを設定する必要があります。最初のボタンのスタイルを設定しないままにしておくと、ブラウザーとシステムによって外観が変わります。だから両方をスタイリングする

このようなグラデーションを使用してボタンのスタイルを設定できます http://www.cssbuttongenerator.com/

そして ::before または ::after 経由で画像を追加します

1 に答える 1