css - 可以将背景图像添加到输入字段的值中吗？

Question

我有一个如下所示的输入字段：

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

输入上有一个背景图像已经给它一个纹理，所以我想添加另一个背景图像而不覆盖原始图像。

我有一个箭头的 png 需要在“CONTINUE”之后显示，并尝试了一些方法在页面上获取它，包括在 CSS 中添加 after 属性：

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

以及尝试将 div 放入值中（值得一试），但我无法显示它。

有没有办法在不使用绝对定位的情况下做到这一点？

Answer 1

那应该做一个技巧：

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

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

只需使用<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;
}