如何在CSS输入焦点上显示div？

我有一个输入和一个div，其高度和宽度等于输入的边界底部。我只想显示首先隐藏的div。如何在CSS输入焦点上显示div？

.cool{ 
 
    font-size: 30px; 
 
    margin: auto; 
 
    outline: none; 
 
    padding-bottom: 0.2em; 
 
    border-width: 0px 0px 2px 0px; 
 
    border-bottom-color: black; 
 
} 
 
div.bar{ 
 
    width: 365.3px; 
 
    height: 2px; 
 
    background-color: #42c0fb; 
 
    position: relative; 
 
    top: -2px; 
 
    display: none; 
 
} 
 
input:focus .bar{ 
 
    display: block 
 
}

<div style = "margin: auto;"> 
 
    <input class = "cool" type = "text" /> 
 
    <div class = "bar"></div> 
 
</div>

请帮助。上面的代码不起作用。

来源

2017-10-09 Sanjay

当您使用input:focus .bar选择器时，浏览器在input的后代下搜索.bar。而.bar是input的兄弟。

你可以在这里使用其中一个兄弟选择器。像：input:focus + .bar或input:focus ~ .bar

.cool { 
 
    font-size: 30px; 
 
    margin: auto; 
 
    outline: none; 
 
    padding-bottom: 0.2em; 
 
    border-width: 0px 0px 2px 0px; 
 
    border-bottom-color: black; 
 
} 
 

 
div.bar { 
 
    width: 365.3px; 
 
    height: 2px; 
 
    background-color: #42c0fb; 
 
    position: relative; 
 
    top: -2px; 
 
    display: none; 
 
} 
 

 
input:focus + .bar { 
 
    display: block 
 
}

<div style="margin: auto;"> 
 
    <input class="cool" type="text" /> 
 
    <div class="bar"> Hello</div> 
 
</div>

来源

2017-10-09 09:00:29 Nisarg

为此，请使用兄弟选择器+。检查以下更新片断..

.cool{ 
 
    font-size: 30px; 
 
    margin: auto; 
 
    outline: none; 
 
    padding-bottom: 0.2em; 
 
    border-width: 0px 0px 2px 0px; 
 
    border-bottom-color: black; 
 
} 
 
div.bar{ 
 
    width: 365.3px; 
 
    height: 2px; 
 
    background-color: #42c0fb; 
 
    position: relative; 
 
    top: -2px; 
 
    display: none; 
 
} 
 
input:focus + .bar{ 
 
    display: block 
 
}

<div style = "margin: auto;">  
 
    <input class = "cool" type = "text" /> 
 
    <div class = "bar">bar text</div> 
 
</div>

来源

2017-10-09 08:56:59

尝试这样

/* form starting stylings ------------------------------- */ 
 
.group \t \t \t { 
 
    position:relative; 
 
    margin-bottom:45px; 
 
} 
 
input \t \t \t \t { 
 
    font-size:18px; 
 
    padding:10px 10px 10px 5px; 
 
    display:block; 
 
    width:300px; 
 
    border:none; 
 
    border-bottom:1px solid #757575; 
 
} 
 
input:focus \t \t { outline:none; } 
 

 

 

 
/* active state */ 
 
input:focus ~ label, input:valid ~ label \t \t { 
 
    top:-20px; 
 
    font-size:14px; 
 
    color:#5264AE; 
 
} 
 

 
/* BOTTOM BARS ================================= */ 
 
.bar \t { position:relative; display:block; width:300px; } 
 
.bar:before, .bar:after \t { 
 
    content:''; 
 
    height:2px; 
 
    width:0; 
 
    bottom:1px; 
 
    position:absolute; 
 
    background:#42c0fb; 
 
    transition:0.2s ease all; 
 
    -moz-transition:0.2s ease all; 
 
    -webkit-transition:0.2s ease all; 
 
} 
 
.bar:before { 
 
    left:50%; 
 
} 
 
.bar:after { 
 
    right:50%; 
 
} 
 

 
/* active state */ 
 
input:focus ~ .bar:before, input:focus ~ .bar:after { 
 
    width:50%; 
 
} 
 

 
/* HIGHLIGHTER ================================== */ 
 
.highlight { 
 
    position:absolute; 
 
    height:60%; 
 
    width:100px; 
 
    top:25%; 
 
    left:0; 
 
    pointer-events:none; 
 
    opacity:0.5; 
 
} 
 

 
/* active state */ 
 
input:focus ~ .highlight { 
 
    -webkit-animation:inputHighlighter 0.3s ease; 
 
    -moz-animation:inputHighlighter 0.3s ease; 
 
    animation:inputHighlighter 0.3s ease; 
 
} 
 

 
/* ANIMATIONS ================ */ 
 
@-webkit-keyframes inputHighlighter { 
 
\t from { background:#5264AE; } 
 
    to \t { width:0; background:transparent; } 
 
} 
 
@-moz-keyframes inputHighlighter { 
 
\t from { background:#5264AE; } 
 
    to \t { width:0; background:transparent; } 
 
} 
 
@keyframes inputHighlighter { 
 
\t from { background:#5264AE; } 
 
    to \t { width:0; background:transparent; } 
 
}

<div class="group">  
 
     <input type="text" required> 
 
     <span class="highlight"></span> 
 
     <span class="bar"></span> 
 
     
 
    </div>

来源

2017-10-09 08:59:00 core114

.cool{ 
 
\t \t \t font-size: 30px; 
 
\t \t \t margin: auto; 
 
\t \t \t outline: none; 
 
\t \t \t padding-bottom: 0.2em; 
 
\t \t \t border-width: 0px 0px 2px 0px; 
 
\t \t \t border-bottom-color: black; 
 
\t \t } 
 
    div.bar{ 
 
\t \t \t width: 365.3px; 
 
\t \t \t height: 2px; 
 
\t \t \t background-color: #42c0fb; 
 
\t \t \t position: relative; 
 
\t \t \t top: -2px; 
 
\t \t \t display: none; 
 
     } 
 
    input:focus + .bar{ 
 
\t \t \t display: block 
 
\t \t  }

<div style = "margin: auto;"> 
 
\t \t <input class = "cool" type = "text" /> 
 
\t \t <div class = "bar"></div> 
 
</div>

来源

2017-10-09 08:59:20

的兄弟选择会为你在这种情况下工作。

但你也可以使用:focus-within

.cool { 
 
    font-size: 30px; 
 
    margin: auto; 
 
    outline: none; 
 
    padding-bottom: 0.2em; 
 
    border-width: 0px 0px 2px 0px; 
 
    border-bottom-color: black; 
 
} 
 

 
div.bar { 
 
    width: 365.3px; 
 
    height: 2px; 
 
    background-color: #42c0fb; 
 
    position: relative; 
 
    top: -2px; 
 
    display: none; 
 
} 
 

 
div:focus-within .bar { 
 
    display: block 
 
}

<div style="margin: auto;"> 
 
    <input class="cool" type="text" /> 
 
    <div class="bar"></div> 
 
</div>

来源

2017-10-09 09:07:06 sol

如何在CSS输入焦点上显示div？

回答

相关问题