Почему этот входной блок не запускает событие фокусировки на IE?

Question

This мой код:

HTML

<div style="position:relative;"> 
    <div style="position:absolute; top:0; left:0; z-index:40;" class="textBoxColor">My <span style='color:#c83243;'>custom</span> text</div>   
    <input type="text" style="position: relative; z-index: 50;" class="textBoxEmpty">   
</div> 

CSS

.textBoxEmpty, .textBoxColor 
{ 
    margin:0; 
    padding:0; 
    border:0; 
    line-height:20px; 
    font-size:20px; 
    height:20px; 
    width:340px; 
    color:#000000; 
    background-color:Transparent; 
} 

JQuery

нажатие на "вход" (по тексту) не могу сфокусируйте вход. Но если я нажимаю рядом с текстом (вправо), это становится фокусом!

Почему? И как я могу это исправить?

Answer 1

Рассмотрим с помощью CSS «: фокус» псевдо, а не с помощью JQuery для манипулирования DOM

Для простых изменений, таких как цвет фона это будет более эффективным

Answer 2

Просто добавьте это:

.textBoxEmpty:focus, .textBoxColor:focus { 
    background-color: #fff; 
} 

и все вы.