Partage

Champ de texte input

Sujet résolu
18 mai 2017 à 20:28:41

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 Lechatgris 18 mai 2017 à 20:30:49

Ne se mettre à genoux que pour cueillir des fleurs....
18 mai 2017 à 20:40:38

Curieux moi je vois pas de soucis.

le soucis est sous quel navigateur ?

car sous chrome tout est ok 

JsFiddle

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE
18 mai 2017 à 21:11:47

C'est sous Firefox..
Ne se mettre à genoux que pour cueillir des fleurs....
18 mai 2017 à 21:26:35

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

18 mai 2017 à 21:44:40

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

@-moz-keyframes anim-1 {
}

/* et le  : */

@-ms-keyframes anim-1 {



Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE
19 mai 2017 à 0:18:23

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.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Staff 19 mai 2017 à 7:40:35

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

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
19 mai 2017 à 7:55:23

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 !?:euh:

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

Ne se mettre à genoux que pour cueillir des fleurs....
19 mai 2017 à 9:26:53

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.


Il y a longtemps que je n'ai pas touché au PC ni codé ^^ je suis pas très a jour de ce qui a été modifié j'avoue ^^
Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE

Champ de texte input

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown