Question

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

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

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

我有一个箭头需要在“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>代码

即可

Fiddled here

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

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

3 个答案: