如何在html中的input [type = text]中创建输入[type = image]

Question

我希望获得类似apple'textbox的文本字段：

但我只能创造这个：

我的代码：

/// <summary>
/// Limit options supported by Access.
/// </summary>
/// <remarks>This is a strict subset of LimitOptions</remarks>
public enum AccessLimitOption
{
    /// <summary>
    /// No limits were applied.
    /// </summary>
    None = LimitOptions.None,

    /// <summary>
    /// Uses TOP
    /// </summary>
    RowsWithTies = LimitOptions.RowsWithTies,

}

.my-textfield, .my-textfield:focus {
  width: 253px;
  height: 27px;
  outline: none;
  border: none;
  padding-left: 4.5px;
  padding-right: 25px;
  font-size: 15px;
  border-radius: 4px;
  background-color: #CECDD2;
}
.ico-close:focus {
  outline: none;
}

那么，我可以将它移动到文本字段吗？ （我不需要左角的搜索图标）

Answer 1

我想说一个好的方法是尝试使用：after伪元素来生成“内容”......这样做：

.my-textfield, .my-textfield:focus {
  width: 253px;
  position: relative; /*this makes it targetable by the :after element position*/
  height: 27px;
  outline: none;
  border: none;
  padding-left: 4.5px;
  padding-right: 25px;
  font-size: 15px;
  border-radius: 4px;
  background-color: #CECDD2;
}
.my-textfield {
  width: 20px;
  height: 20px;
  background-image: url('USE AN IMAGE THAT YOU WANT HERE');
  position: absolute;
  right: 20px;
  top: 5px;
}

它应该看起来像这样...这为每个元素创建一个仅适合其父元素的后置元素...其余部分，调整大小，定位和图像！

祝你好运！

Answer 2

我的案例

.applelike {
  display: inline-block;
  position: relative;
}
.applelike > input[type=text] {
  background-color: lightgrey;
  border: none;
  border-radius: 4px;
  height: 32px;
  box-sizing: border-box;
  line-height: 32px;
  padding: 0 32px;
  display: block;
}
.applelike span#zoom {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  text-align: center;
  font-size: 24px;
  line-height: 32px;
  color: #000;
}
.applelike span#close {
  display: block;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 20px;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  color: lightgray;
  background-color: black;
  border-radius: 32px;
}

<div class="applelike">
  <span id="zoom">&#128269;</span>
  <input type="text">
  <span id="close">&#10006;</span>
</div>