css - 入力フィールドの値に背景画像を追加できますか?

Question

次のような入力フィールドがあります。

<input type="submit" value="CONTINUE" name="submit" class="submitButton">

入力には既にテクスチャを与える背景画像があるため、元の背景画像を上書きせずに別の背景画像を追加したいと考えています。

「CONTINUE」の後に表示する必要がある矢印の png があり、CSS に after プロパティを追加するなど、ページに表示するためにいくつかの方法を試しました。

input.submitButton:after{.....}

値の中にdivを入れようとするだけでなく（試してみる価値があります）、表示できません。

絶対配置を使用せずにこれを行う方法はありますか?

Answer 1

<button>タグを使うだけ

ここをいじった

HTML :

<button type="submit" name="submit" class="submitButton">
    Text inside button <span class="spanner">&rarr;</span>
</button>

CSS :

.spanner {
    background-color:red;
    border-left:4px solid green;
}

Answer 2

矢印+続行で背景を設定する必要がある場合があります

input.submitButton{
  /*background-color: transparent;*/
  background-image: url(arrow.png);
  background-position: 50% 100%;
  /*border: none;
  width: ;
  height: ;*/
  display: inline-block;
  padding-right: ;
}

position:absoluteまたは、矢印のある要素を使用できます。

Answer 3

それはトリックを行うはずです：

input.submitButton{
    background: url(arrow.png) 50% 100%;
}