带 CSS 的浮动标签

Question

我有一个使用 formIo 生成的表单，需要向该表单添加一些样式。

我想让标签在我专注于输入时浮动，只有 CSS

这是生成的 html 和我用来实现此目标的 css：

.ff-container {
  display: flex;
  flex-flow: column-reverse;
  margin-bottom: 1em;
}

.ff-label,
.ff-input {
  transition: all 0.2s;
  touch-action: manipulation;
}

.ff-input {
  font-size: 1.5em;
  border: 0;
  border-bottom: 1px solid #ccc;
  font-family: inherit;
  -webkit-appearance: none;
  border-radius: 0;
  padding: 0;
  cursor: text;
}

.ff-input:focus {
  outline: 0;
  border-bottom: 1px solid #666;
}

.ff-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/*i need to add here :placeholder-shown to the input but i dont know how i do it*/

.ff-container:focus-within > div+label {
  cursor: text;
  max-width: 66.66%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left bottom;
  transform: translate(0, 2.125rem) scale(1.5);
}

<div class="ff-container">
  <div class="ff-sub-container">
    <input type="text" class="ff-input" placeholder="Your name here ..">
  </div>
  <label class="ff-label">Name</label>
</div>

PS:如果您需要更多信息，请告诉我

Answer 1

试一试。当您聚焦输入时，标签会出现在输入旁边。除此之外，您的问题缺乏总体方向并且没有提供所需的视觉效果，因此您需要调整其余代码以满足您的需要。

.hidden {
  display: none;
}
.form-group {
  position: relative;
  padding: 20px 0 0 0;
}
.form-control {
  width: 50%;
}
.form-control:focus + label {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  color: white;
  width: 50px;
  display: inline-flex;
}

<div ref="element" class="form-group">
    <input  class="form-control" type="text" ref="input">
    <label class="col-form-label hidden">Test</label>
 </div>

带 CSS 的浮动标签

Floating label with CSS

html

css

formio