焦点输入格颜色

Question

DEMO

你可以看到有一点点红色区域外的改变。这种红色是主要的div背景色。而这div里面有input。

所以，如果你点击红色区域，那么你可以看到搜索图标改变背景颜色。但是当你点击输入区域时，颜色不会改变。我能在这里做什么？

HTML：

<div class="tt" tabindex="2"> 
    <div class="test"></div> 
    <input type="text" class="input" placeholder="Some text..."/> 
</div> 

CSS：

.tt { 
    width:500px; 
    height:50px; 
    margin:0px auto; 
    margin-top:100px; 
    background-color:red; 
} 
.test { 
    float:left; 
    position:absolute; 
    z-index:1; 
    width:50px; 
    height:50px; 
    background-color:blue; 
    border-radius:50%; 
    background-image:url(http://www.androidpolice.com/wp-content/uploads/2014/06/nexusae0_search.png); 
    background-size:50px; 
    transition: transform(rotate); 
    transition-duration: 400ms; 
    transition-timing-function: cubic-bezier(0.770, 0, 0.150, 1); 
} 
.tt:focus .test{ 
    -webkit-transform: rotate(360deg); 
    border-radius:50%; 
    background-image:url(http://ajkdjournal.org/wp-content/uploads/2014/05/e62f58b03dbcfda4a54f6bac1057305e.png); 
} 
.input{ 
    border:none; 
    outline:none; 
    padding:18px; 
    width:400px; 
    text-indent:40px; 
} 

Answer 1

我已在HTML和CSS的一些变化。我希望它能帮助demo

<div class="tt" tabindex="2"> 
    <!-- note I changed the HTML structure + added changes in the CSS --> 
    <input type="text" class="input" placeholder="Some text..."/> 
    <div class="test"></div> 
</div> 

Answer 2

你需要把你的输入。测试前DIV，然后使用兄弟选择器（+）。该代码应该是：

HTML：

<div class="tt" tabindex="2"> 
    <input type="text" class="input" placeholder="Some text..."/> 
    <div class="test"></div> 
</div> 

CSS：

.input:focus + .test{ 
    -webkit-transform: rotate(360deg); 
    border-radius:50%; 
    background-image:url(http://ajkdjournal.org/wp-content/uploads/2014/05/e62f58b03dbcfda4a54f6bac1057305e.png); 
} 

希望这有助于！