输入框处于活动状态时如何显示文本

时间:2016-03-07 19:04:33

标签: html css forms input

我真的不知道为什么这不起作用。我试图让文本'按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;
}

3 个答案:

答案 0 :(得分:1)

您应该使用以下css:

.searchBox:focus + #prompt {
  color: #000;
  visibily: visible;
}

JSFiddle

#prompt元素是.searchBox的下一个兄弟。 .searchBox:focus > #prompt不起作用,因为>表示孩子。

参考:Selectors - Web developer guides | MDN

答案 1 :(得分:0)

我做了两处修改 使用标签不跨越,并在css中使用“+”而不是“&gt;” 这是我的代笔 http://codepen.io/anon/pen/BKjryV

    #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”元素。

所以第二个适合你。