Trying to get a span to display:block when user clicks the text field. But it's not displaying, anybody see the problem with my code?
see fiddle http://jsfiddle.net/WN22k/
CSS
span {
display:none;
}
input:focus span{
display:block;
}
HTML
<div>Password: <input type='password' name='password' maxlength="100"> <span class="help">...password message...</span></input></div>
As Chris says, you can't have children of <input> elements.
Try this instead:
HTML:
<div>Password:
<input type="password" name="password" maxlength="100" />
<span class="help">...password message...</span>
</div>
CSS:
.help {display:none}
input:focus~.help {display:block}
Note that you might want display:inline or display:inline-block, depending on what you're doing.
~ and +, but one of them means "next sibling" and the other means "any sibling after this element".
~ is the adjacent sibling, so it typically just selects the sibling next to whatever the rest of your selector is selecting. + is much more broad and applies to all siblings.+ only applies to siblings that come after, not before ;)
Spans can't be a child element of an input, your markup is invalid.
Often if you're adding some sort of contextual message, you could either:
A) Add it as the value of the input, and then clear it with javascript as soon as the input gets focus
B) Write the message just off to the side or as a tooltip
While your mark-up is invalid, I've got a solution that will work. It requires a little jQuery, but is flexible enough to meet your needs:
I've taken the liberty of fixing your HTML:
<label for="password">Password: </label>
<input type="password" class="help" id="password" name="password" maxlength="100" rel="help_password" />
<span id="help_password" class="message">...password message...</span>
To adhere to WCAG standards, your input field requires a correlating label tag. I've also added a rel attribute which the value should match an ID tag of the corresponding help message's ID attribute.
And with a tiny bit of jQuery:
$(document).ready(function(event) {
$('input.help').focus(function(event) {
$('#' + $(this).attr('rel')).show();
});
$('input.help').blur(function(event) {
$('#' + $(this).attr('rel')).hide();
});
});
You can auto-toggle the help message for any field that has the class "help" and a corresponding help message span tag.
label tag can be made to not need an ID on the element, simply by moving the </label> to be after the input.