我正在寻找将占位符文本移动到焦点输入上方的 css 代码。我在这里找到了这段代码。这段代码是完美的,但我的输入标签被包装在<span>
里面,因此一般的兄弟选择器不起作用。任何想法如何编辑这个 css?
<div>
<span class='blocking-span'>
<input type="text" class="inputText" />
</span>
<span class="floating-label">Your email address</span>
</div>
,您可以使用 CSS 伪选择器:placeholder-shown
来检测何时将假占位符移开。请参阅以下示例:
label {
margin:20px 0;
position:relative;
display:inline-block;
}
span {
padding:10px;
pointer-events: none;
position:absolute;
left:0;
top:0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}
input {
padding:10px;
}
input:focus + span, input:not(:placeholder-shown) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
<label>
<input placeholder=" ">
<span>Placeholder Text</span>
</label>
使用给定的链接 CSS 等,只需将floating-label
移动到blocking-span
内即可。
通过在div
上使用position: relative
,floating-label
仍将重新定位,就好像它在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>
改变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){
if($(e.target).parents('.blocking-span input').length==0 && !$(e.target).is('.blocking-span input')){
$('.parents-elm').removeClass('foucs-content');
}
});
});
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>