我在尋找將焦點上的輸入上方的佔位符文本移動到上方的css代碼。我發現這個代碼here。此代碼是完美的，但我的輸入標籤被包裝在<span>內，因此一般的兄弟選擇器不工作。任何想法如何編輯這個CSS？將佔位符上方的焦點輸入移動到輸入上方
<div>
<span class='blocking-span'>
<input type="text" class="inputText" />
</span>
<span class="floating-label">Your email address</span>
</div>
在給定的鏈接CSS等，只需將floating-label的blocking-span內。
通過使用在div的floating-labelposition: relative仍然會重新定位，好像它是在blocking-span
div {
position: relative; /* make label relate to div */
padding-top: 10px; /* make space for label */
}
.inputText {
font-size: 14px;
width: 200px;
height: 25px;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 15px;
top: 18px;
transition: 0.2s ease all;
}
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label {
top: -6px;
}<div>
<span class='blocking-span'>
<input type="text" class="inputText" required/>
<span class="floating-label">Your email address</span>
</span>
</div>我應該爲textarea做些什麼？ @LGSon –
@ArunBaskar喜歡這個？ https://jsfiddle.net/wnw4mmo2/1/ – LGSon
是的。謝謝@LGSon –
外部。如果你改變html結構，那麼你參考的例子是工作，但如果你不想改變html結構，那麼你需要寫點小jQuery。你可以檢查這個。
$(function(){
$('.blocking-span input').on('focus', function(){
$(this).parents('.parents-elm').addClass('foucs-content'); // When focus the input area
});
$(document).mouseup(function(e){
\t \t if($(e.target).parents('.blocking-span input').length==0 && !$(e.target).is('.blocking-span input')){
\t \t \t $('.parents-elm').removeClass('foucs-content');
\t \t }
\t });
});div{
position: relative;
}
.blocking-span{
display: block;
}
.blocking-span input{
border: 1px solid #eaeaea;
height: 80px;
padding-top: 30px;
padding-left: 20px;
padding-right: 20px;
width: 100%;
}
.floating-label{
display: inline-block;
font-size: 15px;
left: 20px;
line-height: 20px;
position: absolute;
top: -webkit-calc(50% - 10px);
top: -moz-calc(50% - 10px);
top: calc(50% - 10px);
transition: top 0.3s ease-in-out 0s;
}
.foucs-content .floating-label{
top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parents-elm">
<span class='blocking-span'>
<input type="text" class="inputText" />
</span>
<span class="floating-label">Your email address</span>
</div>
對於使用您當前佈局的CSS，這是不可能的。 –
如果你也顯示你的CSS，那麼我們可以看到它是如何渲染的，我們可能會提出一個解決方案 – LGSon
css在描述中的原始鏈接上。 – trenccan