Je suis coiffé d'un champ de saisie de texte et que le point est destiné à la bordure et au texte de modifier la couleur lorsqu'il est concentré.
Le problème: lorsque je fixe les styles pour "Border-Bas" sur l'état initial, le La transition ne fonctionne pas.
Je me suis mal gêné dans Dev Outils un peu et lorsque je retire le fond frontalier initial, la transition fonctionne bien. Mais je veux toujours garder mes styles frontières initiaux, alors je ne suis pas sûr de ce qui se passe ici. P>
J'ai eu une recherche et expérimenté quelques jours, mais rien n'a vraiment travaillé ou aidé. Donc, si quelqu'un connaît le problème, il serait grandement apprécié! P>
p>
<form> <input placeholder="Name" class="contactInput" type="text" name="" id=""/> <input placeholder="Email" class="contactInput" type="text" name="" id=""/> </form>
4 Réponses :
Corriger le fond des bordures dans la mise au point.
.contactInput:focus {
border-bottom-color: #000;
}
Salut, merci pour ça. Ni auparavant auparavant travailler (votre première suggestion était le code d'origine, je ne sais pas pourquoi ce n'était pas dans l'exemple, désolé)
Changement de couleur sur la mise au point ne semble pas fonctionner avec la transition, mais la couleur de la frontière semble fonctionner, essayez d'augmenter le temps et la diffrence de la couleur de la voir travailler
Exactement! Les différences sont trop petites pour être perceptibles, mais cela fonctionne comme annoncé. Voir Ce violon où j'ai exagéré les différences de couleur et le temps de transition. La seule chose qui ne va pas en douceur, c'est le poids de la police.
Quel est le problème? Je pense que votre code fonctionne comme raison. De cette façon, vous pouvez voir mieux.
p>
<form> <input placeholder="Name" class="contactInput" type="text" name="" id=""/> <input placeholder="Email" class="contactInput" type="text" name="" id=""/> </form>
Le problème est que la transition ne fonctionne pas lorsque le fond des frontières est appliqué. Des idées?
:: espace réservoir code> sélecteur pour modifier la couleur de l'espace réservé de l'entrée. <form>
<input placeholder="Name" class="contactInput" type="text" name="" id=""/>
<input placeholder="Email" class="contactInput" type="text" name="" id=""/>
</form>
En fait, ça fonctionne mais vous ne pouvez pas voir. Parce qu'il a à différents pixels lors du début et de la fin. Par exemple =>
p>
<form>
<input placeholder="Name" class="contactInput" type="text" name="" id=""/>
<input placeholder="Email" class="contactInput" type="text" name="" id=""/>
</form>
Vous devriez ajouter la partie HTML aussi
Quel navigateur test-tu-tu ??
Opéra, chrome, bord et c'est-à-dire
Ne fonctionne pas encore ??
Pas encore, je ne suis peut-être pas une autre ligne de CSS interférant avec cela, mais j'ai vérifié que ce n'était pas le cas
La transition fonctionne bien dans l'exemple.
@Bhuwan vraiment? Cela ne fonctionne même pas dans l'exemple pour moi ou mon collègue
@Trent quelle transition vous parlez? le changement de couleur ou la largeur augmente.