浮动标签和占位符重叠 [英] floating label and placeholder overlapping

问题描述

<input class="form-control" placeholder="Name" type="text" required><span class="form-b​​ar"></span><label class="float-label">Name</label>

这里是css，

.form-material {.form-group {位置:相对；&.form-static-label .form-control {~.float-label {顶部:-14px；}}}.form-control {&:焦点{边框颜色:透明；大纲:无；框阴影:无；}&:焦点，&:有效{~.float-label {顶部:-14px；}}}

如果我专注于文本字段，它工作正常.但是当没有焦点时，它会重叠.asdasd dasd dasdsad ad asd das dasd asd a das

解决方案

一定要在 angular.json 文件中的样式部分添加 Material 主题 css 文件.

示例(参见indigo_pink.css 行):

样式":[./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"，node_modules/bootstrap/dist/css/bootstrap.min.css"，src/styles.css"],

这个给我带来了问题

<div class="form-group form-default form-spacing">
     <input class="form-control" placeholder="Name" type="text" required>
     <span class="form-bar"></span>
     <label class="float-label">Name</label>
</div>

here is css,

.form-material {
    .form-group {
        position: relative;

        &.form-static-label .form-control {
            ~.float-label {
                top: -14px;
            }
        }
    }

    .form-control {

        &:focus {
            border-color: transparent;
            outline: none;
            box-shadow: none;

        }

        &:focus,
        &:valid {
            ~.float-label {
                top: -14px;
            }
        }
    }

if i focus on text field it works fine. but when there is no focus it's overlapping. asdasd dasd dasdsad ad asd das dasd asd a das

解决方案

Be sure to add material theme css file to styles section in angular.json file.

Example (see indigo_pink.css line):

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

This one was causing issues at my side

这篇关于浮动标签和占位符重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！