Wie auf HTML-Eingabe mit CSS konzentrieren

Question

ich folgende HTML-Struktur haben:

<span id="span_pagination_text_input"> 
    <input type="text" class="form-control" id="pagination_text_input" name="pagination_text_input"/> 
    ... 
</span> 

und nach CSS:

span#span_pagination_text_input{ 
    position:relative; 
} 

span#span_pagination_text_input > input#pagination_text_input{ 
    left: -11px; 
    position: absolute; 
    top: -35px; 
    width: 57px; 
    z-index: 10; 
    display:none; 
    text-align:center 
} 
span#span_pagination_text_input:hover > input#pagination_text_input{ 
    display:block; 
} 

Zu diesem Zeitpunkt, wenn Besucher auf meiner span schweben ich input Feld zeigen die ist standardmäßig ausgeblendet.

Wie kann ich mich auf input Kinder von span konzentrieren, wenn ich das mit CSS zeige?

Ich weiß über jQuery, aber derzeit suche ich nach CSS-Lösung.

Answer 1

Ich glaube nicht, dass es nur mit CSS möglich ist. Sie können Javascript versuchen

document.getElementById("IdOfInput").focus(); 

:-)

Answer 2

Sie erreichen können, dass durch tabindex verwendet, die HTML5 jetzt in allen Elementen ermöglicht zusammen mit dem :focus, zu fälschen die display:none Verwendung border:0

input { 
 
    border: 0; 
 
    width: 57px; 
 
    z-index: 10; 
 
    text-align: center 
 
} 
 
span:focus input { 
 
    border: 5px solid red; 
 
    transition: border .1s 
 
} 
 
input:focus { 
 
    border: 5px solid green; 
 
}

<span tabindex="1" id="span_pagination_text_input"> 
 
    Click me 
 
    <input type="text" class="form-control" id="pagination_text_input" name="pagination_text_input" /> 
 
</span>