文本框文本隐藏浮动标签文本框样式答案

【问题标题】：Textbox text hides for floating label Textbox Style文本框文本隐藏浮动标签文本框样式
【发布时间】：2019-11-28 19:15:08
【问题描述】：

我想将标签转换为表单中文本框的浮动样式。我已经对输入框的悬停和焦点执行了操作。这里的问题是当标签浮动并向上移动时，文本会被隐藏。

这是我迄今为止尝试过的 HTML 和 CSS。

.float-label {
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px 6px;
    color: #767676;
    pointer-events: none;
    transition: 0.2s ease all;
}

.form-control:focus ~ .float-label, 
.form-control:not(:focus):valid ~ .float-label {
    top: -18px;
    margin-left:5px;
    font-size: 12px;
    opacity: 1;
    z-index: 1;
    background-color: white;
}

                            <div class="form-group border-lable-flt">
                                <input type="email" class="form-control" id="work_email" required>
                                <label class="float-label" for="workEmail">Work email</label>
                            </div>

【问题讨论】：

您可以使用此链接进行浮动标签：css-tricks.com/float-labels-css
其实不符合我的要求
把你的需求截图
我创建了一个小提琴jsfiddle.net/kowdxf5n/2
这里可以找到浮动标签的例子：codepen.io/collection/IjFib/?grid_type=list

标签： html css

【解决方案1】：

您可以使用:placeholder-shown 伪类。如果您不想将color: transparent 设为占位符文本，您可以完美像素匹配标签和占位符的样式。

.form-group {
  position: relative;
  padding: 20px;
}
.float-label {
    position: absolute;
    left: 25px;
    top: 21px;
    color: #767676;
    pointer-events: none;
    transition: 0.2s ease all;
}

input::placeholder {
  color: transparent;
}

.form-control:focus ~ .float-label, 
.form-control:not(:focus):valid ~ .float-label,
input:not(:placeholder-shown) ~ .float-label {
    top: 5px;
    font-size: 12px;
    opacity: 1;
    z-index: 1;
    background-color: transparent;
}

    <div class="form-group border-lable-flt">
        <input type="email" class="form-control" id="work_email" required placeholder="Work email">
        <label class="float-label" for="workEmail">Work email</label>
    </div>

【讨论】：

@tkamath99 你能再解释一下吗？谢谢
如果您在这里说/发布您将来为其他人解决问题的方式会很好。

【解决方案2】：

尝试进行以下更改：

.form-group{
  margin-top:20px;
  position:relative;
}
.float-label {
  position: absolute;
  left: 0;
  top: 0;
  padding:0;
  color: #767676;
  pointer-events: none;
  transition: 0.2s ease all;
}

【讨论】：

【解决方案3】：

使用此代码： html:

<div class="form-group border-lable-flt textinput">
  <input type="email" id="email" class="form-control"  />
  <label for="email">Email address</label>
</div>

CSS：

.textinput {
  height: 3em;
  margin: 1em 0;
  position: relative;
  width: 100%;
}

.textinput input,
.textinput label {
  cursor: text;
  font-size: 1.5em;
  padding: 0.6em 1% 0.15em 1%;
  position: absolute;
  transition: all 0.15s ease;
  width: 98%;
}

.textinput input {
  border: solid black 1px;
  border-radius: 0.15em;
}

.textinput label {
  color: #BCB9B8;
  padding: 0.5em 1%;
}

.textinput input.filled ~ label,
.textinput input:focus ~ label {
  font-size: 0.6em;
  font-weight: 600;
  position: absolute;
}

.textinput input.filled ~ label {
  color: #007932;
}

.textinput input[type="text"].filled,
.textinput input[type="email"].filled:valid {
  background: #B8DB9B;
}

.textinput input[type="text"].filled ~label:after,
.textinput input[type="email"].filled:valid ~label:after {
  color: #007932;
  content: "\f058";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 3em;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 0.3em;
  right: 0.3em;
  transform: translate(0, 0);
}

【讨论】：