Question

我正在寻找将占位符文本移动到焦点上的输入上方的css代码。我找到了这段代码here。这段代码很完美，但我的输入标记包含在<span>内，因此一般的兄弟选择器不起作用。有任何想法如何编辑这个CSS？

<div>
  <span class='blocking-span'>
  <input type="text" class="inputText" />
  </span>
  <span class="floating-label">Your email address</span>
</div>

Answer 1

在这种情况下，您可以使用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>

Answer 2

使用给定的链接CSS等，只需移动floating-label内的blocking-span即可。

在position: relative上使用div，floating-label仍会重新定位，就好像它位于blocking-span

之外

＆＃13;

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;
}

＆＃13;

<div>
  <span class='blocking-span'>
    <input type="text" class="inputText" required/>
    <span class="floating-label">Your email address</span>
  </span>
</div>

＆＃13;

Answer 3

如果您更改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>

Answer 4

我使用了联系表7，它给了我额外的跨度。但我已经找到了如何阻止这个额外跨度的解决方案。有一个过滤器可以删除此联系表格7跨度。这是link.

将占位符移动到焦点上的输入上方

4 个答案: