Bonjour

J'ai trouvé une amélioration de style de input type text, mais comme le montrent les deux images ci-dessous, lorsque du texte est  tapé dedans et que l'input n'est plus sélectionné, le label vient se superposer sur le texte tapé, ce qui n'est pas le résultat attendu, qui est que le label reste en haut, dès que du texte est tapé à l’intérieur du input...

Quand il est sélectionné :

Quand il ne l'est plus :

Voici mon code :

HTML :

<span class="input input--hoshi">
    <input class="input__field input__field--hoshi" type="text" name="requete" maxlength="255" id="input-4" placeholder="Votre recherche ici" size="50">
    <label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-4"></label>
</span>

CSS :

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
.input {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 1em;
  max-width: 350px;
  width: calc(100% - 2em);
  vertical-align: top;
}
.input__field {
  position: relative;
  display: block;
  float: right;
  padding: 0.8em;
  width: 60%;
  border: none;
  border-radius: 0;
  background: #f0f0f0;
  color: #aaa;
  -webkit-appearance: none; /* for box shadows to show on iOS */
}
.input__field:focus {
  outline: none;
}
.input__label {
  display: inline-block;
  float: right;
  padding: 0 1em;
  width: 40%;
  color: #6a7989;
  font-weight: bold;
  font-size: 70.25%;
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.input__label-content {
  position: relative;
  display: block;
  padding: 1.6em 0;
  width: 100%;
}
.graphic {
  position: absolute;
  top: 0;
  left: 0;
  fill: none;
}
.icon {
  color: #ddd;
  font-size: 150%;
}
/* Individual styles */
/* Hoshi */
.input--hoshi {
  overflow: hidden;
}
.input__field--hoshi {
  margin-top: 1em;
  padding: 0.85em 0.15em;
  width: 100%;
  background: transparent;
  color: #595F6E;
}
.input__label--hoshi {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 0.25em;
  width: 100%;
  height: calc(100% - 1em);
  text-align: left;
  pointer-events: none;
}
.input__label-content--hoshi {
  position: absolute;
}
.input__label--hoshi::before,
.input__label--hoshi::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 10px);
  border-bottom: 1px solid #B9C1CA;
}
.input__label--hoshi::after {
  margin-top: 2px;
  border-bottom: 4px solid red;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
.input__label--hoshi-color-1::after {
  border-color: hsl(200, 100%, 50%);
}
.input__label--hoshi-color-2::after {
  border-color: hsl(160, 100%, 50%);
}
.input__label--hoshi-color-3::after {
  border-color: hsl(20, 100%, 50%);
}
.input__field--hoshi:focus + .input__label--hoshi::after,
.input--filled .input__label--hoshi::after {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.input__field--hoshi:focus + .input__label--hoshi .input__label-content--hoshi,
.input--filled .input__label-content--hoshi {
  -webkit-animation: anim-1 0.3s forwards;
  animation: anim-1 0.3s forwards;
}
@-webkit-keyframes anim-1 {
  50% {
    opacity: 0;
    -webkit-transform: translate3d(1em, 0, 0);
    transform: translate3d(1em, 0, 0);
  }
  51% {
    opacity: 0;
    -webkit-transform: translate3d(-1em, -40%, 0);
    transform: translate3d(-1em, -40%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -40%, 0);
    transform: translate3d(0, -40%, 0);
  }
}
@keyframes anim-1 {
  50% {
    opacity: 0;
    -webkit-transform: translate3d(1em, 0, 0);
    transform: translate3d(1em, 0, 0);
  }
  51% {
    opacity: 0;
    -webkit-transform: translate3d(-1em, -40%, 0);
    transform: translate3d(-1em, -40%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -40%, 0);
    transform: translate3d(0, -40%, 0);
  }
}

Je voudrais que l'indication votre mot de passe reste en haut quand il y a du texte.

Pourriez-vous m'indiquer comment procéder svp ?

Merci d'avance

-
Edité par Anonyme 18 mai 2017 à 20:30:49

Curieux moi je vois pas de soucis.

le soucis est sous quel navigateur ?

car sous chrome tout est ok 

JsFiddle

Hello,

Je ne vois pas différence avec le JsF  sous FF et Edge...

Ps: il serait plus pertinent pour le visuel utilisateur de garder le trait activé une fois le champ complété et vérifié, et ce même s'il n'a plus le focus. Enfin avis perso.

-
Edité par Lucky13 18 mai 2017 à 21:27:59

peut-être que cela vient de l'anim. Il manque le :

@-moz-keyframes anim-1 {
}

/* et le  : */

@-ms-keyframes anim-1 {

stefde3 a écrit:

peut-être que cela vient de l'anim. Il manque le :

@-moz-keyframes anim-1 {
}

/* et le  : */

@-ms-keyframes anim-1 {

Il n'y en a plus besoin depuis un certain nombre de versions déjà. Donc à moins qu'il ne tourne sur de vieux navigateurs… Et quand bien même, ce serait plutôt à lui de se mettre à jour, du coup.

(surtout que @-ms-keyframes n'a jamais existé)

Merci pour toutes les réponses.

@stefde3

Sur votre jsfiddle, le label redescend et cache toujours le texte...(Je suis sus Linux, mais cela ne doit rien changer normalement..)

Si vous voulez le modifier : jsfiddle.net/wtf7azLo/

@Lucky13

Garder le trait activé dès qu'il y a du texte est une bonne idée, mais comment procéder ?

@rhooManu

"Et quand bien même, ce serait plutôt à lui de se mettre à jour, du coup."

Je n'ai aucun @-moz-keyframes dans mes codes !?

-
Edité par Anonyme 19 mai 2017 à 13:19:04

rhooManu a écrit:

stefde3 a écrit:

peut-être que cela vient de l'anim. Il manque le :

@-moz-keyframes anim-1 {
}

/* et le  : */

@-ms-keyframes anim-1 {

Il n'y en a plus besoin depuis un certain nombre de versions déjà. Donc à moins qu'il ne tourne sur de vieux navigateurs… Et quand bien même, ce serait plutôt à lui de se mettre à jour, du coup.