我是 Angular 的新手。我正在做一个项目。我创建了一个自定义的month-picker组件在Angular 6从暂存（*因为我不允许任何外包第三方库甚至没有bootstrap，fontawesome或primeng）和我想要一个简单的文本字段中，我想展示一个简单的日历图标。我尝试了几种解决方案。这是最相关的，但他们正在使用AngularJS. 这也有些不同。这也不是很有用。这是我的代码。我还创建了一个CodePen。
时间选择器.component.html
<our-icon class="icon-our-calendar"></our-icon>
<input class="input-field" type="text">
注意： <our-icon>是我组织自己的图标库。我不被允许超越这一点。
我在 CodePen 上尝试过这个，但对图标使用了一些十六进制代码。无论如何我可以将our-icon标签作为占位符添加到输入字段中，如下所示：
<input class="input-field" type="text" placeholder="<our-icon class="icon-our-calendar"></our-icon>">
我知道这是完全错误的，但只是想让您了解我的实际意思。
但首先我想问一下它是否可行，或者我只是在浪费每个人的时间。请给我一些方向。
这只是一个css问题。将图标和输入视为不同的元素，而不是相互结合。
制作position: absolute图标并根据图标的大小应用填充，以便在图标之后开始输入。
CSS
input {
width: 450px;
padding: 5px 35px;
height: 25px;
}
.input-wrapper {
position: relative;
}
.input-wrapper .input-icon {
position: absolute;
padding: 12px;
}
模板
<div class="input-wrapper">
<app-our-icon class="input-icon"></app-our-icon>
<input>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句