如何在文本框右侧添加图像并且文本不会溢出

Posted 2023-02-23

【中文标题】如何在文本框右侧添加图像并且文本不会溢出

【英文标题】：How to add an image toward the right of a textbox and the text not overflowing to it

【发布时间】：2014-11-14 16:11:39

【问题描述】：

我有以下文本框：

<input type="text" id="fromAdd" class="styledTB searchBDir" />

CSS：

.styledTB 
    padding-left: 5px;
    background: #E8E8E8;
    opacity: 1;
    border: none;
    outline: none;
    right: 35px;
    box-shadow:
        0px 5px #BBB,
        0px 8px 10px rgba(148, 148, 148, 0.5);

.searchBDir 
    height: 30px;
    width: 90%;

显示这个：

如何在框右侧添加以下图标并使其可点击以获取地理位置：

要做这样的事情（我想调整图像大小以适应文本框而不是如图所示重叠）：

我正在使用以下脚本，一旦单击图标并且用户授予权限，它将填充文本框：

$.get("http://ipinfo.io", function (response) 
    $("textboxid").text("Location: " + response.city + ", " + response.region);
, "jsonp");

【参考方案1】：

这就是我们正在做的事情

对 HTML 的一些细微改动

<div class='styledTB'>
    <input type="textbox" id="gpsInput" />
    <button id="searchBDir"></button>
</div>

我们在这里所做的是为您的输入和按钮提供一些布局上下文。容器将作为我们布置其余元素的边界框。您可以仅通过输入直观地完成此操作，但由于您有一个可点击元素，因此将可点击区域设为按钮是有意义的（用于可访问性、语义、等等、等等、等等……）。

关于 CSS：

.styledTB 
   position: relative;
    display: inline-block;
    height: 40px;  /* Arbitrary number */
    width: 400px; /* Arbitrary number */    

.styledTB input 
    width: 100%; /* Arbitrary number */
    height: 100%;
    padding-right: 40px;
    box-sizing: border-box;

#searchBDir 
    height: 100%;
    width: 40px; /* Or however long you'd like your button to be, matches padding-right above */
    background-image: url(http://i.stack.imgur.com/4v62r.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: none;
    background-color: transparent;
    position: absolute;
    right: 0;
    top: 0;

阅读 cmets，因为它们很有帮助，但作为高级概述：

我们将边界框（div）置于一个相对位置，这样我们就可以对按钮进行绝对排序。我们定义了我们希望输入元素出现的大小（我任意选择了一些数字，无论您将它们设置为什么大小，它都应该类似地工作）并设置 display inline-block 以反映普通input元素的大小。

然后我们强制盒子填充它的容器，将 width 和 height 声明为 100% 并给盒子一个 padding-right 或 40px 以匹配我们预期的按钮大小。我们将box-sizing 设置为border-box，以便填充不会强制输入大于其包含框。这只是告诉浏览器考虑填充、边框和所有内部间距元素，以免增加元素的外部边界。

最后，我们将按钮设置为position: absolute，并为其赋予定位值以强制其位于框的右侧。我们为其提供 GPS 图标的背景图像，然后将其适当地放置在按钮内。

border 和 background-color 规则用于将按钮的默认浏览器呈现覆盖为凸起的灰色框。

希望对你有帮助！

Fiddle here

【讨论】：

我会试一试的。我没有使用固定宽度来使其具有响应性，但让我测试一下。谢谢。

检查我的编辑。那有一个附加的小提琴，你可能只是批发偷它。

@SearchForKnowledge – 此外，这些任意数字也可以很容易地成为百分比。

这是我所做的jsfiddle.net/yfLntjd8/4（第一个文本框是我现在的大小。你能帮我解决一下吗。谢谢。

很抱歉。没有注意到您已将样式放在元素本身上。我强烈建议将它们移至 CSS，但这里有一个更新的元素：jsfiddle.net/yfLntjd8/10

【参考方案2】：

将图像设置为向右对齐的背景，并设置 padding-right。

【讨论】：

我将无法使其成为可以点击的热链接：/