我真的不知道为什么这不起作用。我试图让文本'按enter enter to search'在输入框处于活动状态时出现。但由于某种原因,它不适用于CSS。你怎么做呢?
HTML:
<form action="http://google.com/search">
<p class='inp'><input type='text' name='q'class='searchBox' placeholder='What do you want to search for George?' >
<span id='prompt'>Enter to search</p></span>
</form>
CSS:
#prompt{
color:#fff;
font-weight:400;
margin-left:30px;
opacity:0;
}
.searchBox:focus > #prompt{
color:#000;
opacity:1;
}
答案 0 :(得分:1)
您应该使用以下css:
.searchBox:focus + #prompt {
color: #000;
visibily: visible;
}
#prompt
元素是.searchBox
的下一个兄弟。 .searchBox:focus > #prompt
不起作用,因为>
表示孩子。
答案 1 :(得分:0)
#prompt{
color:#fff;
font-weight:400;
margin-left:30px;
visibly:hidden;
}
.searchBox:focus + #prompt{
color:#000;
visibily:visible;
}
<form action="http://google.com/search">
<input type='text' name='q'class='searchBox' id='iEl' placeholder='What do you want to search for George?' >
<label for='iEl' id='prompt'>Enter to search</label>
</form>
答案 2 :(得分:0)
首先你的html结构是错误的,然后关闭p标签。它应该是
<div class="someClass">
<div class="someOtherClass">
<label id="someLabel"></label>
</div>
</div>
那么css应该是
<span id='prompt'>Enter to search</span></p>
在css选择器div&gt; p表示选择父项为“div”元素的所有“p”元素。
div + p表示选择紧跟在“div”元素之后的所有“p”元素。
所以第二个适合你。