Javascript 焦点上的css标签不起作用

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

div{
高度：50px；
宽度：200px；
边框底部：1px纯黑；
-webkit过渡：宽度2s；
过渡：宽度2s；
}
新闻组：焦点{
背景色：透明；
宽度：300px；
态度：轻松；
外形：1px纯黑；
}
标签{
字体大小：20px；
}

三色边框！

我不知道您打算如何使用这个div来接受文本，但是为了减少标签字体大小，您可以将

div:focus-label{font-size:14px；}

添加到css中，这样会减少焦点

div{
高度：50px；
宽度：200px；
边框底部：1px纯黑；
-webkit过渡：宽度2s；
过渡：宽度2s；
}
新闻组：焦点{
背景色：透明；
宽度：300px；
过渡：轻松；
外形：1px纯黑；
}
div：焦点标签{
字体大小：14px；
过渡：字体1s轻松
}
标签{
字体大小：20px；
过渡：字体1s轻松
}

三色边框！

Css仅用于设置元素的样式。问题在于检测输入是否为空。不能使用css分析元素。为此，您需要JS<代码>变量大小=$（“输入”）.text（）.length
并在html中使用putonfocusout函数检查大小<代码>三色边框
当把它放在一起的时候

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

---

当然，这些样式也包括在类中。

如果没有输入文本，或者单击其他地方

-当没有输入文本时，在哪里？有输入字段吗？