• Bordure input

    Nous utilisons un élément bouton "input", qui accepte le focus (clic), ce qui permet de commander cet élément ou d'autres.

    Ce bouton comporte, par défaut, une bordure et un fond blanc ce qui n'est pas gênant, comme dans l'exemple ci-dessous. 

    Clic sur le bouton.

    <div style="width: 15vw; height: 15vw;"><input id="xx1" type="text" value="clic" /></span>
    <p id="xx2"><span style="font-size: 14pt;">Clic sur le bouton.</span></p>
    </div>

    <style><!--
    #xx1{width:3vw; font-size:3vh;}
    #xx2{width:10vw; height:10vw; border:0.1vw solid black; background:yellow;}
    #xx1:focus ~ #xx2{background:green;}
    --></style>

    Mais si nous voulons placer bouton, au dessus de l'élément à animer, en invisible, il nous faut effacer la bordure et la couleur de fond.

    Le couleur de fond peut être paramétrée en transparent, du genre: background:transparent; ou encore background:rgba(0,0,0,0);

    La bordure, avec le navigateur Firefox, peut être supprimée par: border:none; mais les navigateurs Chrome, Safari et Opera (webkit), n'acceptent pas border:none et la bordure apparaît par défaut; d'après ce que je lis, c'est volontaire. Exemple ci-dessous.

    Clic sur ce cadre.

    <div style="width: 30vw; height: 12vw;"><input id="xx3" type="text" />
    <p id="xx4"><span style="font-size: 14pt;">Clic sur ce cadre.</span></p>
    </div>

    <style><!--
    #xx3{position:absolute; z-index:5; width:10vw; height:10vw; background:transparent; border:none; transform:translate(0vw,0vh);}
    #xx4{position:absolute; z-index:1; width:10vw; height:10vw; background:lime; transform:translate(0vw,0vh); transition:all 1s linear;}
    #xx3:focus ~ #xx4{background:coral; transform:translate(15vw,0vh);}
    --></style>

    Un moyen de faire disparaître cette bordure à l'affichage est de rendre le bouton transparent par opacity:0; 

    Clic sur ce cadre.

    <div style="width: 30vw; height: 12vw;"><input id="xx5" type="text" />
    <p id="xx6"><span style="font-size: 14pt;">Clic sur ce cadre.</span></p>
    </div>

    <style><!--
    #xx5{position:absolute; z-index:5; width:10vw; height:10vw; background:transparent; border:none; opacity:0; transform:translate(0vw,0vh);}
    #xx6{position:absolute; z-index:1; width:10vw; height:10vw; background:pink; transform:translate(0vw,0vh); transition:all 1s linear;}
    #xx5:focus ~ #xx6{background:blue; transform:translate(15vw,0vh);}
    --></style>