Problème de transition

Par intelligid, il y a 10 ans

Les bases HTML/CSS

Bonjour,

J'ai un problème avec un code. J'utilise bootstrap paper de Bootswatch.

Ce que je fais

Ici je crée une transition pour passer de 180px à 300px en2s.

voici le CSS:

input.extensible{ width: 180px; transition: width 2s ease; } input.extensible:focus{ width: 300px; }

Le code HTML(j'utilise le barre de navigation de bootstrap):

<div class="navbar navbar-default navbar-fixed-top"> <div class="collapse navbar-collapse"> <form class="pull-right navbar-form"> <input type="text" class="input-sm form-control extensible" placeholder="Recherche"> </form> </div> </div>

voici un codepen

Ce que je veux

Je cherche à créer une transition sur l'input ayant une classe extensible(comme sur la barre de recherche de Grafikart.fr)

Ce que j'obtiens

J'obtiens absolument rien, la barre passe à 300px sans transition.

Merci

3 réponses

Sankaman, il y a 10 ans

Salut, pourrais-tu nous informer sur le navigateur que tu utilises ? Car je viens de faire un codepen et ton code marche très bien chez moi !
J'ai testé sous Firefox 43 et Chrome 47 :)
Bonne journée !

intelligid, il y a 10 ans

Firefox 43 et Chrome 47 aussi ;)

Sankaman, il y a 10 ans

Tu as essayé ton code sans le context bootstrap paper ? Je pense qu'il y a conflit entre plusieurs règles css, il ne prend donc pas en compte la tienne.