Question

这个非常棘手，我很确定它无法用简单的CSS3实现（很容易用jQuery，但我试图避免这种情况）。也许有些黑客？我需要它与跨浏览器兼容（IE7 +＆amp;其余）。

我有一个：在.wrapper的伪元素之前。我希望它在.wrapper child（输入）为：focus时改变颜色。任何想法如何做到这一点？

这是HTML：

<p class="wrapper"><input type="text" /></p>

和CSS：

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;
}

我想出的最好的事情是：

.wrapper:before:hover {
   color: #333;
}

但是当用户只是将鼠标悬停在输入上而没有点击它时，它很糟糕。

和jsfiddle一起玩：http://jsfiddle.net/8kEgz/2/

Answer 1

如果您只提供IE8 +，则可以稍微更改一下HTML以获得所需的效果。我建议使用容器，但下面是非容器版本。诀窍是将input作为p

的长辈兄弟

/* HTML */
<div class='contain'>
    <input type="text"/>
    <p class="wrapper"></p>
</div>

/* CSS */
body { background: #eee; }
.contain input[type="text"] {
    position: relative;
    padding: 10px 30px;
} 
input { font-family: 'FontAwesome'; background: #333; border: solid 1px #000; }
.wrapper:before {
    font-family: 'FontAwesome';
    color: #fff;
    position: absolute;
    top: 20px;
    left: 20px;
    content: "\f007";
    z-index: 1;
}
input:focus {
    border: solid 1px #fff;
    outline: 0;
    color: #333;
    background: #fff;
}
input:focus + .wrapper:before { color:#333; }

Demo here

可以不使用容器元素，但我不推荐它，因为它涉及使用ID或nth-child疯狂并补偿边距和任何其他位置变化。 Demo of the ID approach。如果您的其他元素在页面上移动，这也会失败，例如重新定位，因为窗口太小

CSS3 - 在焦点上更改父元素的伪元素颜色？

1 个答案: