28172 sujets

CSS et mise en forme, CSS3

Faire un formulaire avec un text field

Modérateur
Il reste intéressant au niveau des idées Smiley smile , même si l'anim est un peu trop longue/imposante à mon goût, mais ça se modifie.
merci pour vos réponses j'aime pas trop ton site SolidSnake il y en as tellement de bien que je ne sais pas lequel choisir Smiley biggrin
hum j'ai choisis celui la http://zougui.esy.es/forum%20test/test.html et j'aimerais y ajouter le box-shadow de celui la http://zougui.esy.es/forum%20test/test2.html
sauf que je n'y arrive pas, de plus j'aimerais changer la couleur du texte, des barres et du box-shadow je n'y arrive pas non plus de plus j'aimerais mettre un text audessus du champ pseudo http://zougui.esy.es/forum%20test/pages/register.php , je n'y arrive pas je met un label audessus mais sa fait un truc degueulasse ducoup je l'ai mis dans le label par defaut du champs.
Modifié par zougui91 (06 Jul 2017 - 14:44)
Les deux exemples paraissent un peu incompatible, non ?

Sinon pour changer les couleurs, tu ouvres ton débuggeur et tu trouveras ces lignes:
.input__field--shoko:focus + .input__label--shoko, .input--filled .input__label--shoko {
    color: xxx;
}
/* et */
.input__field--shoko:focus ~ .graphic--shoko, .input--filled .graphic--shoko {
    stroke: xxx;
}


Pour ton autre question, tu dois pouvoir rajouter assez facilement un autre label que tu customise en CSS également.
pour les deux exemples je suis sur qu'il y a moyen de les "fusionner" même si cela risque d'être compliqué.

cela ne marche pas tu peu aller vérifer http://zougui.esy.es/forum%20test/pages/register.php

.input__field--shoko:focus + .input__label--shoko,
.input--filled .input__label--shoko {
    color: rgb(0,162,232);
    -webkit-transform: translate3d(0, 3.5em, 0) scale3d(0.85, 0.85, 1);
    transform: translate3d(0, 3.5em, 0) scale3d(0.85, 0.85, 1);
}

.input__field--shoko:focus ~ .graphic--shoko,
.input--filled .graphic--shoko {
    stroke: rgb(0,162,232);
    -webkit-transform: translate3d(-66.6%, 0, 0);
    transform: translate3d(-66.6%, 0, 0);
}


ok je vais essayer
Sujet clos
Aller à