Bonjour,
Je développe un formulaire de contact qui est fonctionnel mais quelques petits détails m'embêtent sans être handicapant.
Comme le montre l'image ci-dessous, il y a un "dézoom" du label lorsque le curseur est sur un champs. Le soucis est que pour avoir cet effet, j'ai du ajouter l'attribut "required" à mes input et textarea. Dans le cas contraire, le "dézoom" est permanent, ce dont je ne saisi pas trop (je ne suis plus très a jour au niveau css depuis pas mal d'années).
Ça ne poserait pas de soucis si tous les champs étaient obligatoire mais j'en ai justement un optionnel.
Voici mon code html (je n'en mets qu'une partie car c'est grosso modo une répétition du même code) :
Et mon code CSS :
De plus, l'info bulle qui apparaît lors d'une saisie invalide, suit le scrolling de la page au lieu d'être "fixé" sous le champs.
Comment puis-je régler ces petits soucis ?
Je vous remercie d'avance.
Modifié par Xhanxhand (17 Dec 2019 - 10:55)
Je développe un formulaire de contact qui est fonctionnel mais quelques petits détails m'embêtent sans être handicapant.
Comme le montre l'image ci-dessous, il y a un "dézoom" du label lorsque le curseur est sur un champs. Le soucis est que pour avoir cet effet, j'ai du ajouter l'attribut "required" à mes input et textarea. Dans le cas contraire, le "dézoom" est permanent, ce dont je ne saisi pas trop (je ne suis plus très a jour au niveau css depuis pas mal d'années).
Ça ne poserait pas de soucis si tous les champs étaient obligatoire mais j'en ai justement un optionnel.
Voici mon code html (je n'en mets qu'une partie car c'est grosso modo une répétition du même code) :
<div class="container">
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
<fieldset><legend>Vos coordonnées</legend><br />
<div class="group">
<?php if ($fehler["name"] != "") { echo $fehler["name"]; } ?>
<input type="text" name="name" value="<?php echo $_POST[name]; ?>" <?php if ($fehler["name"] != "") { echo 'class="errordesignfields"'; } ?> />
<span class="highlight"></span>
<span class="bar"></span>
<label>Nom</label>
</div>
</form>
</div>Et mon code CSS :
* { box-sizing:border-box; }
/* basic stylings ------------------------------------------ */
.container {
width:1000px;
margin:30px auto 0;
display:block;
padding:10px 50px 50px;
}
/* form starting stylings ------------------------------- */
.group {
position:relative;
margin-bottom:45px;
}
textarea { height :200px; }
input, textarea {
width :500px;
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
border:none;
border-bottom:1px solid #4bb5f2;
background :transparent;
}
input:focus, textarea:focus { outline:none; }
/* LABEL ======================================= */
label {
color:#4bb5f2;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
input:focus ~ label, input:valid ~ label, textarea:focus ~ label, textarea:valid ~label {
top:-20px;
font-size:14px;
color:#5fd072;
}
/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; width:500px; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#5fd072;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after, textarea:focus ~ .bar:before, textarea:focus ~.bar:after {
width:50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
input:focus ~ .highlight, textarea:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
@keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}De plus, l'info bulle qui apparaît lors d'une saisie invalide, suit le scrolling de la page au lieu d'être "fixé" sous le champs.
Comment puis-je régler ces petits soucis ?
Je vous remercie d'avance.
Modifié par Xhanxhand (17 Dec 2019 - 10:55)
