Html 如何在输入框的右上角显示图像

我有一个输入框

<span class="arrowDate"><input type="text" value="<?php echo $inputValue; ?>" id="<?php echo $id; ?>" class="datePickBox"  /></span>

最好使用这个

<span><input type='text' /><img src='datepicker.jpg' /></span>

更改css以满足您的覆盖。。删除文本框的右边框

为您的

提供一个透明的背景，以便

的背景可以穿透并删除边框，因为边框来自您的案例中的

.datePickBox {
   background: none;
   border: none;
}

但是如果足够长，文本将覆盖在背景图像上，因此您可以额外添加一个与图像宽度一样大的右侧填充

.datePickBox {
   background: none;
   border: none;
   padding-right: 20px; /* bg image width */
}

鉴于加价：

<span><input type="text" id="textInput" name="textInput" />&rarr;</span>

给出以下几点

值得注意的是，我明确选择将箭头放置在

输入旁边，而不是将其“覆盖”在
输入上方。还可以修改以创建一个类似的布局，在输入旁边有一个提交按钮

无法使图像显示在输入框内，覆盖我的意思是浮动在输入框上方

<span class="arrowDate"><input type="text" value="<?php echo $inputValue; ?>" id="<?php echo $id; ?>" class="datePickBox"  /></span>

您将无法使用
背景图像将其漂浮在文本上方

一种方法是将图像放置在输入字段旁边，并使用相对定位将其移动到输入字段上方

CSS:

HTML:


什么不起作用？“叠加”到底是什么意思？@pekka-输入框基本上应该看起来像一个选择框，右边有一个箭头，应该是输入框的一部分。无法使图像显示在输入框内，覆盖我的意思是浮动在输入框上方
span {
    display: block;
    width: 150px;
    height: 30px;
    position: relative;
    background-color: #ffa;
    text-align: right;
    overflow: hidden;
    border-radius: 1em;
    border: 1px solid #ccc;
    line-height: 30px;
    padding: 0 0.5em 0 0;
}

span > input {
    position: absolute;
    top: 0;
    left: 0;
    right: 2em;
    bottom: 0;
    background-color: transparent;
    border-radius: 1em 0 0 1em;
    border-width: 0;
    border-right: none;
    outline: none;
}

.boximage { position: relative; left: -40px; z-index: 2 }

<input type='text'><img class='boximage' src='image.gif'>