Question

我创建了一个带有两个交叉和箭头图像的输入标签。

这是我的代码。

<div id="chart_line" style="position: relative;">
    <input type="text" id="myInput" list="myUL" onclick="openingList()" onkeyup="openingList()" style="width:30%;">
        <div id="triggers">
            <img class="trigger" onclick="deleteValue()" src="css/clearT.png" id="cross">
            <img class="trigger" src="css/combo_arrow.png" onclick="openingList()" id="arrow">
        </div>
</div>

这是我的小提琴：

Fiddle

我在这里遇到两个问题。

我希望我的图片应该在输入标签的末尾。现在我在CSS中手动提供。你可以看到

#triggers { 位置：绝对; 左：110px; 顶部：5px; }

我正在给left : 110px如何在输入标签的末尾解决这个问题。输入标签宽度可能会改变。

我想在图像开始之前限制输入标记。现在文字正在图像下面。甚至光标也在图像下方。知道如何解决这个问题。

这是图片供您参考。

由于

Answer 1

＆＃13;

* {
  box-sizing: border-box;
}
.field {
  position: relative;
  width: 300px;
}
.field input {
  width: 100%;
  padding: 5px 50px 5px 10px;
  white-space: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.field .triggers {
  position: absolute;
  top: 5px;
  right: 5px;
}

＆＃13;

<div class="field">
  <input type="text" value="some very long value to check what goes under the images">
  <div class="triggers">
    <img class="trigger trigger--cross" src="css/clearT.png">
    <img class="trigger trigger--arrow" src="css/combo_arrow.png">
  </div>
</div>

＆＃13;

Answer 2

第一个问题是：

#container {
  position: relative;
  width: 30%;
}

过去#container现在是#chart_line，所以如果您将上述CSS更改为：

#chart_line {
  position: relative;
  width: 30%;
}

那应该做点什么。

接下来的工作是将代码中的每个width: 30%;更改为width: 30vw;。

然后你需要给#myInput一些填充：

  padding: 0 55px 0 7px;

现在您需要做的就是从left: 110px中移除CSS #triggers并将其替换为right: 6px;

＆＃13;

* {
  box-sizing: border-box;
}
#myInput {
  position: relative;
  border: 1px solid #95B8E7;
  background-color: #fff;
  height: 30px;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  padding: 0 55px 0 7px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
#chart_line {
  position: relative;
  width: 30vw;
}
#textfield {
  height: 30px;
  width: 100%;
}
.trigger {
  width: 20px;
}
#triggers {
  position: absolute;
  right: 6px;
  top: 5px;
}

＆＃13;

<div id="chart_line">
  <input type="text" id="myInput" list="myUL" onclick="openingList()" onkeyup="openingList()" style="width:30vw;">
  <div id="triggers">
    <img class="trigger" onclick="deleteValue()" src="css/clearT.png" id="cross">
    <img class="trigger" src="css/combo_arrow.png" onclick="openingList()" id="arrow">
  </div>
</div>

＆＃13;

CodePen

Answer 3

你需要在这里做一个技巧。您需要将input和imgs放在div内，然后移除边框并正确设置组件样式以使其看起来自然。

以下是有关如何操作的参考。 Put icon inside input element in a form

Answer 4

您需要将position:relative添加到您的父div，input和triggers添加position:absolute。

然后将width: 100%添加到您的输入中以占据父div的所有位置，并将right: 5px添加到您的触发器以将它们放置在右侧。

最后在padding添加一些input，以避免该文字显示在trigger张图片上。

因此，像这样：

* {
  box-sizing: border-box;
}

#chart_line {
  position: relative;
  width: 30%;
}

#myInput {
  position: absolute;
  border: 1px solid #95B8E7;
  height: 30px;
  width: 100%;
  padding-right: 50px;
}

#triggers {
  position: absolute;
  right: 5px;
  top: 5px;
}

<div id="chart_line">
  <input type="text" id="myInput" list="myUL" onclick="openingList()" onkeyup="openingList()" />
  <div id="triggers">
    <img onclick="deleteValue()" src="css/clearT.png" id="cross">
    <img src="css/combo_arrow.png" onclick="openingList()" id="arrow">
  </div>
</div>

你可以在这玩吧。 Fiddle.

如何在输入标签中正确放置图像

4 个答案: