Question

我有一个使用 formIo 生成的表单，并且需要为此表单添加一些样式。

仅在使用 CSS

时，我想使标签在输入时浮动起来

这是生成的html和我用来实现该目标的CSS：

SELECT existingColumn, ‘example’ AS example FROM mytable

.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);
}

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的浮动标签

1 个答案: