Html 如何将离子标签放在最上面? 我试图做一个新的谷歌风格的输入标签,但是当我的标签上升时,他在中间被切掉,正如你在这里看到的
我试着改变边距、填充和Z索引。他们都没有解决我的问题 我没有使用默认的离子类,因为它不太适合 我怎样才能让标签像谷歌输入那样显示 我的SCSS:Html 如何将离子标签放在最上面? 我试图做一个新的谷歌风格的输入标签,但是当我的标签上升时,他在中间被切掉,正如你在这里看到的,html,css,angular,ionic-framework,sass,Html,Css,Angular,Ionic Framework,Sass,我试着改变边距、填充和Z索引。他们都没有解决我的问题 我没有使用默认的离子类,因为它不太适合 我怎样才能让标签像谷歌输入那样显示 我的SCSS: .invalid { border: 2px solid #f53d3d !important; } .danger { color: #f53d3d; } .item-input { margin-top: 5px; &.invalid { color: red; } } ion-label.google-l
.invalid {
border: 2px solid #f53d3d !important;
}
.danger {
color: #f53d3d;
}
.item-input {
margin-top: 5px;
&.invalid {
color: red;
}
}
ion-label.google-label {
color: #fff;
background-color: #3880ff;
font-size: 12px;
margin-left: 10px !important;
padding-left: 4px !important;
padding-right: 4px !important;
position: absolute !important;
margin-bottom: 5px !important;
z-index: 9;
}
ion-input.google-input {
padding-top: 10px !important;
color: white;
border: 2px solid white;
width: 100%;
max-width: 100%;
padding-left: 10px !important;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.item-label-floating {
&.ion-invalid.ion-touched {
.google-label {
color: #f53d3d !important;
}
}
&.item-has-value {
.google-label {
padding-left: 4px !important;
padding-right: 4px !important;
color: #062f77 !important;
-webkit-transform: translate3d(0, -50%, 0) !important;
transform: translate3d(0, -50%, 0) !important;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
-webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
&.danger {
color: #f53d3d !important;
}
}
&.ion-valid.ion-touched {
.google-label {
color: #fff !important;
}
}
}
&.item-has-focus {
.google-label {
padding-left: 4px !important;
padding-right: 4px !important;
color: #062f77 !important;
-webkit-transform: translate3d(0, -50%, 0) !important;
transform: translate3d(0, -50%, 0) !important;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
-webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
&.danger {
color: #f53d3d !important;
}
}
.google-input {
border: 2px solid #062f77;
}
&.ion-valid.ion-touched {
.google-label {
color: #062f77 !important;
}
}
}
}
我的HTML:
<ion-item lines="none">
<ion-label class="google-label" position="floating" [class.danger]="showErrors('email')">
E-Mail
</ion-label>
<ion-input formControlName="email" class="google-input" [class.invalid]="showErrors('email')" type="text">
</ion-input>
</ion-item>
电子邮件
我原以为标签是这样显示的
由于文本在技术上超出了元素的范围,因此必须在其上设置
溢出:可见。如果这不起作用,那么在顶部加上一点填充物应该会起作用,尽管这是一种黑客行为。对于其他用户,我使用以下方法解决了这个问题:
HTML:
不需要z-index等。只需添加离子项css溢出:inherit。嗨,J,溢出应该在标签或父元素中?J,这对我不起作用:(任何想法,我也尝试过更改z-index机器人,这是我的回复,你能帮我吗?
<div class="label-float" [class.invalid]="showErrors('email')">
<input type="text" formControlName="email" placeholder=" " />
<label>E-Mail</label>
</div>
.label-float {
position: relative;
padding-top: 13px;
&.invalid {
label {
color: #f53d3d !important;
}
input {
border: 2px solid #f53d3d !important;
}
}
input {
background-color: transparent;
border: 2px solid #fff;
border-radius: 5px;
outline: none;
min-width: 250px;
padding: 15px 20px;
font-size: 16px;
transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-webkit-appearance: none;
&:focus {
border: 2px solid #3951b2;
}
&::placeholder {
color: transparent;
}
}
label {
color: #fff;
pointer-events: none;
position: absolute;
top: calc(50% - 8px);
left: 20px;
transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
background-color: #3880ff;
padding-top: 5px;
margin-left: 10px;
padding-left: 4px;
padding-right: 4px;
box-sizing: border-box;
}
}
.label-float input:focus + label,
input:not(:placeholder-shown):not(.invalid) + label {
font-size: 13px;
top: 0;
color: #3951b2;
}
.label-float input:not(:focus):not(:placeholder-shown):not(.invalid) + label {
font-size: 13px;
top: 0;
color: #fff;
}