如何解决在 HTML 中可浮动不止一个所有标签都是浮动的
我正在尝试在 Ionic 中创建自定义 Float 标签,但是一旦输入它就可以了。不止一次当我们点击任何输入时,字段所有标签都是浮动的,请帮帮我
这是我的 HTML 代码:
Input.htmls
<div class="form-field">
<label [ngClass]="focused ? 'label-focused' : ''">Hellow</label>
<input type="text" (focus)="focused = true" (blur)="onBlur($event)" />
</div>
这是我的 SCSS 代码:
Input.scss
.form-field {
position: relative;
margin-bottom: 1rem;
height: 50px;
label {
position: absolute;
left: 1rem;
top: 1rem;
padding: 0 0.25rem;
color: #61686f;
font-size: 15px;
transition: 0.3s;
font-family: "Montserrat";
}
input {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
font-size: 15px;
border: 2px solid #e7ebee;
border-radius: 10px;
outline: none;
padding: 1rem;
background: none;
z-index: 1;
color: #171c25;
font-family: "Montserrat";
}
input:focus {
border-color: #fa578e;
}
.label-focused {
top: -0.4rem;
left: 0.8rem;
font-size: 14px;
font-weight: 600;
background-color: #fff;
z-index: 10;
}
}
这是我的组件打字稿代码: 输入.ts
onBlur(event: any) {
const value = event.target.value;
if (!value) {
this.focused = false;
} }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。