-2

我有一个使用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：如果您需要更多信息，请告诉我

4

1 回答 1

2

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

.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>

于 2020-10-06T20:57:19.020 回答