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

我真的不知道为什么这不起作用。我试图让文本'按回车搜索'出现在输入框处于活动状态时。但它不适用于我有一些原因的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; 
}

来源

2016-03-07 George Baker

您的html结构是错误的，关闭p标签，然后跨度。 – Indra

你应该使用下面的CSS：

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

JSFiddle

#prompt元素是NEX t兄弟.searchBox。 .searchBox:focus > #prompt不起作用，因为>意味着孩子。

参考：Selectors - Web developer guides | MDN

来源

2016-03-07 19:07:55 akinuri

伟大的:)也不要忘记接受最合适的答案，因为人们可能会继续发布答案，认为你还没有找到解决问题的办法。 – akinuri

我做了两个变化使用标签不能跨越，并在CSS中使用来访问 “+” 而不是 “>” ，这是我codepen 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>

来源

2016-03-07 19:11:57

第一所有的html结构都是错误的，关闭p标签然后跨度。它应该是

<span id='prompt'>Enter to search</span></p>

接着的CSS应

.searchBox:focus + #prompt

在CSS选择DIV> p表明选择所有的 “p” 元素，其中所述亲本是 “分区” 元素。

而div + p表示选择所有放置在“div”元素后面的“p”元素。

所以第二个适合你。

来源

2016-03-07 19:14:15 Indra

回答

相关问题