樣式化的輸入

Question

我有一個HTML內在張力結構那樣的焦點或懸停2周的div的CSS：

<form class="form"> 
       <div class="row"> 
        <input id="search" class="search-input" type="text" placeholder="Search"> 
        <div class="input-icon" data-icon="s"></div> 
        <div class="triangle-left"></div>      
       </div> 
      </form> 

和下面的CSS代碼女巫重要的是知道：

input[type="text"]:focus, input[type="text"]:hover, input[type="password"]:focus, input[type="password"]:hover { 
    border:1px solid #ffa800; 
    box-shadow: 0 0 5px #ffa800, 0 4px 4px rgba(0,0,0,.1) inset; 
    -moz-box-shadow: 0 0 5px #ffa800, 0 4px 4px rgba(0,0,0,.1) inset; 
    -webkit-box-shadow: 0 0 5px #ffa800, 0 4px 4px rgba(0,0,0,.1) inset; 
} 
input[type="text"]:focus + .input-icon:before, input[type="text"]:hover + .input-icon:before, input[type="password"]:focus + .input-icon:before, input[type="password"]:hover + .input-icon:before{ 
    color:#ffa800; 
    border-color: #ffa800; 
} 
input[type="text"]:focus .triangle-left, input[type="text"]:hover .triangle-left, input[type="password"]:focus .triangle-left, input[type="password"]:hover .triangle-left{ 
    border-color:transparent transparent transparent #ffa800; 
} 

第一代碼很好用，如果我懸停或集中輸入的div與類輸入圖標獲取新的顏色和邊界顏色。我的問題是我可以在第二個div（.triangle-left）中進行更改嗎？我已經嘗試過，但我不工作。只有第一格受到影響。如果我改變這個第一個三角形左邊的CSS比代碼工作。

你知道一個方法來做到這一點，或者是唯一的可能性使用小jQuery腳本？

感謝您的幫助:)

問候 Crazymodder

Answer 1

作爲一個快速編輯： http://jsfiddle.net/xngbv/ 的問題是，你實際上並沒有有什麼設置.triangle-left使用你想要的懸停樣式和重點。 .triangle-left是一個div，沒有任何一種輸入的，所以你必須在你的最後一塊，你用.triangle-left設置的樣式，都沒有效果

編輯：受影響渲染我所做的更改使用

.triangle-left:focus, .triangle-left:hover

代替

input[type="text"]:focus .triangle-left, input[type="text"]:hover .triangle-left

，因爲你有它的方式，風格適用於輸入型文本時集中/徘徊，那也有風格triangle-left。由於類triange-left的唯一元素是div，因此沒有元素受到影響。你想要的是將樣式直接應用於實際上設置爲triangle-left的元素。如果你不想只通過類名，你可以使用div.triangle-left:focus或類似的東西。