Clic input

L'utilisation du clic pour lancer une animation impose d'utiliser un élément cliquable: <input>

Cette balise a un inconvénient, c'est qu'elle a une bordure d'office au clic (focus) lorsqu'on utilise <input type="text"> et un fond opaque.

Par contre, la bordure n'existe pas avec <input src="http..." type="image">

<div style="width: 800px; height: 450px; background: green; margin: 50px auto; border: 6px ridge grey; text-align: left;"><input id="ex1" type="text" />
<p id="ex2">&nbsp;</p>
<p id="ex3">CLIC</p>
</div>
<style><!--
#ex1{position:absolute; z-index:5; width:100px; height:100px; border-radius:50%; transform:translate(100px,100px); background:transparent;}
#ex2{position:absolute; z-index:1; width:100px; height:100px; border-radius:50%;transform:translate(100px,100px); background:yellow; transition:all 1s;}
#ex3{position:absolute; z-index:1; width:100px; font-size:25px; color:white; text-shadow:1px 1px black;transform:translate(600px,50px);}
#ex1:focus ~ #ex2{transform:translate(300px,100px);}
--></style>

Mais, dans bien des cas, on doit utiliser le type=" text" et j'ai cherché sur internet la solution.

Voici le code avec l'effacement de la bordure:

<div style="width: 800px; height: 450px; background: green; margin: 50px auto; border: 6px ridge grey; text-align: left;"><input id="ex1" type="text" />
<p id="ex2">&nbsp;</p>
<p id="ex3">CLIC</p>
</div>
<style><!--
#ex1{position:absolute; z-index:5; width:100px; height:100px; border-radius:50%; transform:translate(100px,100px); background:transparent;outline:none; border-color:transparent;}
#ex2{position:absolute; z-index:1; width:100px; height:100px; border-radius:50%;transform:translate(100px,100px); background:yellow; transition:all 1s;}
#ex3{position:absolute; z-index:1; width:100px; font-size:25px; color:white; text-shadow:1px 1px black;transform:translate(600px,50px);}
#ex1:focus ~ #ex2{transform:translate(300px,100px);}
--></style>

Ce qui donne:

La commande au clic impose un retour en position de départ par un autre clic hors du premier.

Si, dans le montage ci-dessus, vous cliquez au même endroit qu'au départ, il ne se passera rien; il faut cliquer hors premier clic.

La solution générale est de placer, dans l'angle haut/droit, un petit paragraphe en premier plan avec X en rouge.

On peut aussi, comme je le montre dans mes derniers montages, positionner un paragraphe transparent, de la taille du montage et placé en dernier plan (z-index:1;)

et faire qu'un clic fasse passer ce paragraphe en premier plan (z-index:10;).

Ainsi, lorsque qu'un clic a déclenché une animation sur un élément, en même temps, il faut passer en premier plan le paragraphe transparent qui, en cliquant dessus, n'importe où dans le montage, ramène le montage en position de départ, ce qui est plus agréable que d'aller cliquer sur le petit X dans le coin haut/droit.

<div style="width: 800px; height: 450px; background: green; margin: 50px auto; border: 6px ridge grey; text-align: left;"><input id="ex1b" type="text" />
<p id="ex2b">&nbsp;</p>
<p id="ex3b">CLIC</p>
<p id="ex0">&nbsp;</p>
</div>
<style><!--
#ex1b{position:absolute; z-index:5; width:100px; height:100px; border-radius:50%; transform:translate(100px,100px); background:transparent;outline:none; border-color:transparent;}
#ex2b{position:absolute; z-index:2; width:100px; height:100px; border-radius:50%;transform:translate(100px,100px); background:yellow; transition:all 1s;}
#ex3b{position:absolute; z-index:2; width:100px; font-size:25px; color:white; text-shadow:1px 1px black;transform:translate(600px,50px);}
#ex0{position:absolute; z-index:1; width:500px; height:450px;}
#ex1b:focus ~ #ex2b{transform:translate(300px,100px);}
#ex1b:focus ~ #ex0{z-index:10;}
--></style>