Question

我需要减少要输入的文本的焦点上的标签大小。如果没有输入文本或点击其他地方，请将其恢复为相同的大小。以下是我正在尝试的代码段。

＆＃13;

div {
  height: 50px;
  width: 200px;
  border-bottom: 1px solid black;
  -webkit-transition: width 2s;
  transition: width 2s;
}
div:focus {
  background-color: transparent;
  width: 300px;
  tansition: ease;
  outline: 1px solid black;
}
label {
  font-size: 20px;
}

＆＃13;

<div tabindex="0">
  <label>Three-colored border!</label>
</div>

＆＃13;

这只能在CSS中实现，还是需要包含任何javascript或angular js？

Answer 1

我不知道你打算如何使用这个div接受文字但是为了减少标签字体大小，你可以将div:focus label { font-size: 14px; }添加到你的CSS中，它会减少焦点。

＆＃13;

div {
  height: 50px;
  width: 200px;
  border-bottom: 1px solid black;
  -webkit-transition: width 2s;
  transition: width 2s;
}
div:focus {
  background-color: transparent;
  width: 300px;
  transition: ease;
  outline: 1px solid black;
}
div:focus label {
  font-size: 14px;
  transition: font 1s ease
}
label {
  font-size: 20px;
  transition: font 1s ease
}

＆＃13;

<div tabindex="0">
  <label>Three-colored border!</label>
</div>

＆＃13;

更新：字体缩减现在转换为div

Answer 2

Css仅用于构造元素。问题是检测输入是否为空。你不能用css分析元素。为此你需要JS。 var size = $("input").text().length;
并在html中放置 onfocusout 函数来检查大小。 <label onfocusout="fn()">Three-colored border!</label>
把它放在一起

function fn() {
    var size = $("label").text().length;
    if (size>0) {
        $("div").addClass("goodClass");
    } else {
        $("div").addClass("badClass");
    }
}

当然，这些风格包含在课程中。

焦点不工作的CSS标签

2 个答案: