Question

我有一个输入框

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

我想要实现的是在输入框的右上角用css和image添加箭头和箭头。如果我更改图像的属性，输入框的属性应保持不变。基本上，图像应该是输入框的一种叠加，但不知道如何做到这一点。

.datePickBox{
        font-size: 0.9em;
        border: 1px solid #DEDEDE;
        width: 270px;
        position:relative;
        right:0px !important;
        padding-right:20px;
}

.arrowDate{ background:url('../images/arrow.png') no-repeat right center; border:1px solid #DEDEDE;  }

Answer 1

为<input>提供透明背景，以便<span>的背景能够通过并删除边框，因为边框来自您的<span>;

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

但是你的文字将在背景图片上，如果足够长，那么你可以另外添加一个与图像宽度一样大的右边填充。

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

Answer 2

鉴于加价：

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

我使用了CSS：

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

提供以下JS Fiddle demo。

值得注意的是，我明确选择将箭头放在旁边input，而不是将覆盖在上方 input。也可以修改my answer from the a similar question以创建具有提交按钮的可比较布局。

Answer 3

无法在输入框中显示图像，叠加我的意思是漂浮在输入框上方

您将无法使用background-image将其悬浮在文本上方。

执行此操作的一种方法是将图像放在输入字段旁边，并使用相对定位将其移到上方。

CSS：

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

HTML：

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

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

4 个答案: