This situation is quite challenging, and I believe achieving it with plain CSS3 alone is difficult (easier with jQuery, but I'm trying to avoid that). Are there any potential workarounds or hacks? My main goal is for it to be cross-browser compatible (including IE7+ and other browsers).
The scenario involves using a :before pseudo-element for the .wrapper class and wanting it to change color when the child of .wrapper (an input) is in focus. Any thoughts on how this can be accomplished?
Below is the provided HTML code:
<p class="wrapper"><input type="text" /></p>And here is the CSS code:
body {
background: #eee;
}
.wrapper input[type="text"] {
position: relative;
padding: 10px 30px;
}
input { font-family: 'FontAwesome'; background: #333; border: solid 1px #000; }
.wrapper {
position: relative;
}
.wrapper:before {
font-family: 'FontAwesome';
color: #fff;
position: absolute;
top: 13px;
left: 15px;
content: "\f007";
z-index: 999;
}
input:focus {
border: solid 1px #fff;
outline: 0;
color: #333;
background: #fff;
}
My current solution involved using the following code snippet:
.wrapper:before:hover {
color: #333;
}However, this approach falls short when a user simply hovers over the input without clicking on it.
Feel free to experiment further with the code on this jsfiddle link.