28172 sujets

CSS et mise en forme, CSS3

Appliquer une bordure SVG sur un élément de formulaire

Bonjour,

Comment serait-il possible d'afficher une bordure en SVG sur celle d'un élément, de type <input>, par exemple ?

En effet, si le SVG est transparent au milieu, cela empêche toutefois de cliquer dans le champ en question, même en jouant avec z-index ? upload/1504522368-42683-capture1.jpg
Modifié par Interned (04 Sep 2017 - 12:57)
Je n'ai pas le temps de tester ça, mais j'essaierais quelque chose comme

input[type="password"} {
    background-image: url("truc.svg") ;
    background-size:cover;
    width: 10em;
    height: 2em;
    padding:0.5em;
}

Modifié par PapyJP (04 Sep 2017 - 15:19)
Administrateur
Bonjour,

Interned a écrit :
sur celle d'un élément, de type &lt;input&gt;

sur celle d'un élément ? Pas à la place ?

À la place : l'image de fond est en effet la meilleure solution et avec background-size on peut redimensionner le SVG comme on le ferait d'un élément svg.

Sinon quand on veut pouvoir cliquer "à travers" un élément, il y a pointer-events: none mais pas sur IE10-. Ça va dépendre de ton support donc
Merci à vous deux pour vos réponses.

Ce serait, en effet : "à la place de".

pointer-events: none pourrait me convenir, étant donné que je n'ai pas de contrainte au niveau du support : il s'agit d'un projet perso de construction de feuille de personnage pour un jeu de rôle.

Je vais tester vos solutions et reviendrai pour dire ce qu'il en est.

Merci encore
Modifié par Interned (04 Sep 2017 - 18:24)
J'ai donc testé mais je n'arrive pas à obtenir exactement le résultat souhaité car, avec l'attribut cover, si le svg prend bien la place au sein de l'input, il reste du "blanc" entre la <div> et l'<input> :

<div>
        <label for="score">Score</label>
        <input id="score" class="score" name="s" value="" type="text">
    </div>


input[type="text"] {
    background-image: url("truc2.svg");
    background-size: cover;
    width: 10em;
    height: 5em;
    border-style: none;
} 
div {
    background-color: blue;
}

upload/1506874865-42683-capture.jpg
Modifié par Interned (01 Oct 2017 - 18:23)
Oh ! C'est possible en fait !
Je vais tâcher de lui ôter toutes ses marges et vérifier ensuite l'affichage.
Modifié par Interned (01 Oct 2017 - 19:46)
Bon... Smiley ohwell , je ne sais pas comment retirer les marges internes d'un fichier SVG.
Si vous avez la solution, suis preneur !
Modifié par Interned (01 Oct 2017 - 22:51)
Interned a écrit :
Bon... Smiley ohwell , je ne sais pas comment retirer les marges internes d'un fichier SVG.
Si vous avez la solution, suis preneur !

Il faut "tout simplement" éditer l'image de telle façon qu'il n'y ait pas de marges autour, mais comme le contour est irrégulier, il restera des morceaux du fond qui apparaitront, dont il fut rendre le fond transparent.
Comme je galère pas mal avec l'édition des images XML, je serais bien en peine de te dire exactement comment on fait ça avec Inkscape ou tout autre outil d'édition d'images vectorielles, ou encore en modifiant le fichier SVG, qui est du bon XML, et donc éditable par un éditeur de texte utf-8.
Je serai intéressé à la lecture de ceux qui te diront comment faire.
Sujet clos
Aller à