如何專注於HTML的輸入與CSS

-1

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

並按照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; 
}

在當遊客懸停在我的span我會告訴input場這個時間，這在默認情況下隱藏。

當我用CSS顯示時，我如何關注inputspan的孩子？

我瞭解jQuery，但是現在我正在尋找CSS解決方案。

來源

2016-06-01 Majid Abbasi

你不能在CSS中做到這一點。 –

你可以使用像輸入一樣的CSS：focus { background-color：yellow; } –

或使用https://css-tricks.com/snippets/css/glowing-blue-input-highlights/ –

我不認爲這是可能的只有CSS。您可以嘗試的JavaScript

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

:-)

來源

2016-06-01 11:42:46 Manav

我正在尋找一個解決方案，它不使用從jQuery和Javascript –

然後我不認爲css是解決方案 – Manav

可以實現通過使用tabindex其HTML5現在允許在所有元素與:focus一起僞造了display:none使用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>

來源

2016-06-01 12:06:45 dippas

如何專注於HTML的輸入與CSS

回答

相關問題