It's 1 A.M and my half brother Jack from Utah pings me. Hey Ric, I got a webdesign issue that's keeping me awake. I paused for 2 minutes..assuming he is going to tell me more about the issue. But it seemed he was expecting me to solve it, whatever the issue is. So I being the nicest guy, asked him to mail me.
Here's the deal.
Jack wanted to find a space character in an <input> but using CSS3 selectors.Well, if you want to create an actual CSS3 rule in your stylesheet, then input[value*=' ']{..} will work, but only for values in the actual attribute (in the source code) and not the value as modified inside the browser..
For eg:
<form>
<input type="text" value="no-space-here" /><br/>
<input type="text" value="" /><br/>
<input type="text" value="space here" /><br/>
<input type="text" value="" /><br/>
<input type="submit" value="submit"> type a space and press Submit
</form>
CSS
input[value*=' ']{
background-color:#fff5f5;
}
Run the code here and see for yourself. http://jsfiddle.net/8BdUV/
A good solution is to use jQuery here
$('form').submit(function(){
return ($(':input[value*=" "]').addClass('warning').length > 0) ? false : true;
});
CSS
.warning{
background-color:#fff5f5;
}
Now run the solution http://jsfiddle.net/PHja9/
Bingo!
Here's the deal.
Jack wanted to find a space character in an <input> but using CSS3 selectors.Well, if you want to create an actual CSS3 rule in your stylesheet, then input[value*=' ']{..} will work, but only for values in the actual attribute (in the source code) and not the value as modified inside the browser..
For eg:
<form>
<input type="text" value="no-space-here" /><br/>
<input type="text" value="" /><br/>
<input type="text" value="space here" /><br/>
<input type="text" value="" /><br/>
<input type="submit" value="submit"> type a space and press Submit
</form>
CSS
input[value*=' ']{
background-color:#fff5f5;
}
Run the code here and see for yourself. http://jsfiddle.net/8BdUV/
A good solution is to use jQuery here
return ($(':input[value*=" "]').addClass('warning').length > 0) ? false : true;
});
CSS
.warning{
background-color:#fff5f5;
}
Now run the solution http://jsfiddle.net/PHja9/
Bingo!
