如何在输入框中

我有一个输入框的右上角显示图像如何在输入框中

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

我想要实现的是通过CSS和图像的添加和箭头在右上角输入框。如果我将属性更改为图像，则输入框的属性应保持不变。基本上图像应该是输入框的一种叠加，但不知道如何去做。

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

来源

2011-05-16 Roland

什么是不工作？ “覆盖”究竟是什么意思？ – 2011-05-16 13:17:02

@pekka - 输入框应该基本看起来像一个选择框，右边的箭头应该形成输入框的一部分。无法在输入框中显示图像，覆盖图的意思是在输入框上方浮动 – Roland 2011-05-16 13:23:02

给你<input>一个透明背景，使背景的<span>可以通过并删除边框，因为边框来自于你的情况下的<span>;

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

但你的文本将是在背景图像，如果足够长的时间，所以你可以additionaly添加一个右填充一样大的图像宽。

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

来源

2011-05-16 13:22:08 DanielB

更好地利用这个

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

更改CSS，以满足您的覆盖..删除文本框的右边框

来源

2011-05-16 13:16:55

鉴于加价：

<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以创建一个与输入一起提交按钮的可比布局。

来源

2011-05-16 13:23:49

无法获取到输入框内显示的图像，具有覆盖我的意思是上面漂浮在输入框中

，你将无法得到它的浮动与background-image上面的文字。

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

CSS：

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

HTML：

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

来源

2011-05-16 13:25:04

如何在输入框中

回答

相关问题