Question

我已经从chris coyer示例中分叉this codepen，我想让标签移动到顶部而不是底部，就像他正在做的那样。

这样做，我根本无法将光标/胡萝卜移到底部而不是停留在顶部，因此当您键入时，它会覆盖标签并且是一团糟。移动标签的代码（仍然称为go-bottom，但并不重要）

form.go-bottom {
  input {
    padding: 12px 12px 12px 12px; 
  }
  label {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  input:focus {
    padding: 4px 6px 20px 6px;
  }
  input:focus + label {
    top: 100%;
    margin-top: -36px;
  }
}

我已经在输入上尝试了各种填充设置，并且由于某些原因，没有人会影响光标位置本身 - 如果任何人都可以帮助调整它，那将是很好的。（这纯粹基于css / sass而且不想要任何JS或其他）

将过渡动画更改为从下到上而不是从上到下的加分点：）

Answer 1

您可以尝试为焦点上的输入添加更多顶部填充和更少的底部填充。

input:focus {
    padding: 17px 6px 4px 6px;
}

如果您尝试这种方法，我也会玩整体填充，当2行复制时，输入会感到混乱。

当文本输入焦点时，将光标移动到底部

1 个答案: