web-dev-qa-db-fra.com

Déplacer un espace réservé au-dessus de l'entrée sélectionnée

Je recherche un code CSS qui déplace le texte de substitution au-dessus de l'entrée sélectionnée. J'ai trouvé ce code ici . Ce code est parfait, mais ma balise d’entrée est insérée dans <span> et, pour cette raison, le sélecteur de frères et sœurs ne fonctionne pas. Des idées comment éditer ce css? 

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

Vous pouvez utiliser le pseudo-sélecteur CSS :placeholder-shown dans ce cas pour détecter le moment propice pour déplacer un faux paramètre fictif. Voir exemple ci-dessous:

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>

7
Robert Stanley

Avec les liens CSS donnés, etc., déplacez simplement le floating-label dans le blocking-span. 

En utilisant position: relative sur la div, le floating-label sera toujours repositionné comme s'il se trouvait en dehors du 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>

5
LGSon

Si vous modifiez la structure html, votre exemple de référence est work, mais si vous ne souhaitez pas modifier la structure html, vous devez écrire un peu de jQuery. Vous pouvez vérifier cela.

$(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>

0
Rahul

J'ai utilisé le formulaire de contact 7 et il m'a donné cette durée supplémentaire. Mais j'ai déjà trouvé une solution pour bloquer cette extension supplémentaire. Il existe un filtre qui peut supprimer ce formulaire de contact 7 span. Voici le lien .

0
trenccan