焦點上的css標籤不起作用

Question

我需要減小輸入文本焦點上的標籤大小。如果沒有輸入文字或在其他地方點擊，請將其恢復爲相同尺寸。以下是我正在嘗試的代碼片段。

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

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

可這只是在CSS來實現還是需要包括任何JavaScript或角的js？

Answer 1

我不知道你打算如何使用這個div接受文本，但爲了實現標籤字體大小的減少，你可以添加div:focus label { font-size: 14px; }到你的CSS，它會減少焦點。

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 
 
}

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

更新：字體縮小現在去轉型與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"); 
    } 
} 

當然，包含在這些類風格。