web-dev-qa-db-fra.com

Ajouter une image à soumettre le bouton en utilisant CSS

J'essaie d'utiliser CSS pour créer un bouton de somme contenant une image. Voici le code:

HTML

<input type="submit" id="search" name="submit" alt="search" >

CSS

input#search{
    background:url(../search-icon.png);
    background-repeat: no-repeat;
    width:40px;
    height:40px;
}

Cela renvoie ce bouton d'envoi, mais je ne souhaite pas que le mot "soumettre" ou la case grise apparaisse.

http://cs12jcw.icsnewmedia.net/screenshot.png

Si quelqu'un pouvait suggérer quel était le problème, ce serait grandement apprécié.

htmlcss
8
JCW

La case grise est causée par l’ajout d’une bordure par défaut aux boutons de soumission. Considérant que le texte de soumission est la valeur par défaut du bouton.

HTML:

<input type="submit" id="search" name="submit" alt="search" value="">

CSS:

input#search    {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
border: 0;
}
15
jfelsinger

au lieu de type="submit", vous pouvez utiliser le type="image"

utiliser ce code d'une ligne

<input type="image" src="submit.gif" alt="Submit" width="48" height="48">

voir  DEMO

1
AmanS

Ajoutez value avec une chaîne vide à l'entrée:

<input type="submit" id="search" name="submit" alt="search" value="">
1
bodi0

Je trouve que c'est la solution la plus complète:

#submitbutton {
    background-image: url(http://paulabrown.net/search-button-png-210.png);
    background-repeat: no-repeat;
    height: 24px; // height of image
    width: 24px; // width of image
    padding: 0;
    border: none; // get rid of grey border
    color: transparent; // hide the text (without indenting it to hell)
    background-color: transparent;
    outline: none;
    display: block; // Ensure block element to apply this to inline-elements
}
0
d4nyll
<!DOCTYPE html>
<html>
       <head>
       <style>
            input.search{
                background-image:url(url.jpg);
                text-indent:-9999px;
                width: 100px;
                height: 30px;
                border:2px solid rgb(0,102,153);
           }
       </style>
       </head>

       <body>
       <input type="submit" class="search" alt="search">
</body>
</html>

enter image description here

0
Asraful Haque
html: <input type ="submit" value ="" class="search-button"/>
CSS:
.search-button
{
    background-image: url("/images/search.png");
    background-repeat: no-repeat;
    min-width: 52px;
    min-height: 20px;
    width:52px;
    height: 20px;
    border:0;
}
0
Sudhi

Vous pouvez utiliser CSS text-indent pour déplacer le texte:

input#search {
    background:url(../search-icon.png);
    background-repeat: no-repeat;
    width:40px;
    height:40px;
    text-indent:-999px
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

0
putvande

Définissez la valeur vide du type d'entrée submit, comme indiqué ci-dessous: 

<input type="submit" id="search" name="submit" alt="search" value="" >
0
SpiderCode

essaye ça

input#search {
background:url(../search-icon.png) no-repeat;
width:40px;
height:40px;
text-indent:50px;
overflow:hidden;
}
0
Adeel Khanzada