web-dev-qa-db-fra.com

Modification du type d'entrée = "recherche" Bouton pseudo-élément ('x')

J'essaie de faire une barre de recherche qui aura l'air sympa. Ce que j'ai fait, c'est que j'ai fait une image d'une barre de recherche et j'ajoute l'image au fond de l'entrée et j'édite l'endroit et la taille que la police apparaîtra. La seule chose que je ne trouve pas un moyen de modifier est le petit bouton "x" qui apparaît lorsque j'utilise la recherche de type d'entrée. Je veux le déplacer un peu à gauche pour qu'il corrige l'image de ma barre de recherche.

Voici mon HTML:

<input id="search" name="Search" type="search" value="Search" />

Voici mon CSS:

#search{
    width: 480px;
    height: 49px;
    border: 3px solid black;
    padding: 1px 0 0 48px;
    font-size: 22px;
    color: blue;
    background-image: url('images/search.jpg');
    background-repeat: no-repeat;
    background-position: center;
    outline: 0;
}
csssearchinputwebkitpseudo-element
28
user3139952

En supposant que vous parlez de l'icône "Annuler la recherche" [X] qui n'apparaît que dans les navigateurs Webkit (Chrome, Safari, Opera), vous pouvez utiliser -webkit-search-cancel-button pseudo-élément. Par exemple:

#Search::-webkit-search-cancel-button{
    position:relative;
    right:20px;    
}

Démo: http://jsfiddle.net/5XKrc/1/

En utilisant cette approche, vous pouvez même créer votre propre bouton d'annulation, par exemple ce style:

#Search::-webkit-search-cancel-button{
    position:relative;
    right:20px;  

    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius:10px;
    background: red;
}

Au lieu de [X], un cercle rouge sera créé.

Démo http://jsfiddle.net/5XKrc/3/

Pour IE10 et supérieur, vous pouvez utiliser les éléments suivants pour déplacer le bouton:

#Search::-ms-clear{
   margin-right:20px
}

Oh et utilisez placeholder="Search" au lieu de value="Search" - il affichera Word "recherche" lorsque la saisie est vide - et le supprimera automatiquement lorsque l'utilisateur tape quelque chose.

40
Yuriy Galanter

Je souhaite déplacer [la petite icône "x"] un peu vers la gauche afin de corriger l'image de la barre de recherche.

Les utilisateurs s'attendent à ce que les choses ne bougent pas beaucoup dans les interfaces utilisateur. Si vous décidez de déplacer l'icône "x", envisagez d'utiliser des pseudo-classes et déplacez plutôt votre icône de recherche:

enter image description hereenter image description here

Si l'icône de recherche est intégrée, votre image d'arrière-plan la déplace vers une deuxième image avec role="presentation" attribut et placez-le immédiatement après votre input dans le balisage:

<input id="search" name="Search" type="search" value="Search" />
<svg role="presentation" class="i-search" viewBox="0 0 32 32" width="14" height="14" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
  <circle cx="14" cy="14" r="12" />
  <path d="M23 23 L30 30" />
</svg>

Placez-le là où l'utilisateur attend:

#search + svg {
  margin-left: -30px;
  margin-bottom: -2px;
}

Ensuite, cachez-le et affichez-le en utilisant :placeholder-shown pseudo-classes:

#search + svg {
  visibility: hidden;
}
#search:placeholder-shown + svg {
  visibility: visible;
}

Vous pouvez styliser l'icône "x" si vous le souhaitez. Mais vous ne voudrez peut-être plus.

2
Josh Habdas