J'utilise les CSS ci-dessous, mais cela place une image au centre du bouton. Est-il possible d’aligner à gauche ou à droite une icône à l’aide de <input type="button">
, de sorte que le texte et l’image s’adaptent parfaitement?
background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;
Si vous devez absolument utiliser input
, essayez ceci:
background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;
Il est généralement un peu plus facile d'utiliser une button
avec une img
à l'intérieur:
<button type="submit"><img> Text</button>
Cependant, les implémentations du navigateur de button
pour la soumission sont incohérentes, de même que le fait que toutes les valeurs de bouton sont envoyées lorsque button
est utilisé - ce qui supprime la détection du "quel bouton a été cliqué" dans un formulaire à soumissions multiples.
Cela devrait faire ce que vous voulez, en supposant que votre image de bouton mesure 16 x 16 pixels.
<input type="button" value="Add a new row" class="button-add" />
input.button-add {
background-image: url(/images/buttons/add.png); /* 16px x 16px */
background-color: transparent; /* make the button transparent */
background-repeat: no-repeat; /* make the background image appear only once */
background-position: 0px 0px; /* equivalent to 'top left' */
border: none; /* assuming we don't want any borders */
cursor: pointer; /* make the cursor like hovering over an <a> element */
height: 16px; /* make this the size of your image */
padding-left: 16px; /* make text start to the right of the image */
vertical-align: middle; /* align the text vertically centered */
}
Exemple de bouton:
Mettre à jour
S'il vous arrive d'utiliser Less, ce mélange peut vous être utile.
.icon-button(@icon-url, @icon-size: 16px, @icon-inset: 10px, @border-color: #000, @background-color: transparent) {
height: @icon-size * 2;
padding-left: @icon-size + @icon-inset * 2;
padding-right: @icon-inset;
border: 1px solid @border-color;
background: @background-color url(@icon-url) no-repeat @icon-inset center;
cursor: pointer;
}
input.button-add {
.icon-button("http://placehold.it/16x16", @background-color: #ff9900);
}
Ce qui précède est compilé en
input.button-add {
height: 32px;
padding-left: 36px;
padding-right: 10px;
border: 1px solid #000000;
background: #ff9900 url("http://placehold.it/16x16") no-repeat 10px center;
cursor: pointer;
}
<button type="submit" style="background-color:transparent; border-color:transparent;">
<img src="images/button/masuk.png" height="35"/>
</button>
<button type="reset" style="background-color:transparent; border-color:transparent;">
<img src="images/button/reset.png" height="35"/>
</button>
J'espère que ceci vous aide.
Si vous utilisez des feuilles de sprites, cela devient impossible et l'élément doit être encapsulé.
.btn{
display: inline-block;
background: blue;
position: relative;
border-radius: 5px;
}
.input, .btn:after{
color: #fff;
}
.btn:after{
position: absolute;
content: '@';
right: 0;
width: 1.3em;
height: 1em;
}
.input{
background: transparent;
color: #fff;
border: 0;
padding-right: 20px;
cursor: pointer;
position: relative;
padding: 5px 20px 5px 5px;
z-index: 1;
}
Découvrez ce violon: http://jsfiddle.net/AJNnZ/
vous pouvez essayer cette astuce!
1er) faire ceci:
<label for="img">
<input type="submit" name="submit" id="img" value="img-btn">
<img src="yourimage.jpg" id="img">
</label>
2ème) le style!
<style type="text/css">
img:hover {
cursor: pointer;
}
input[type=submit] {
display: none;
}
</style>
Ce n'est pas propre mais ça fera le travail!
vous pouvez essayer insérer une image à l'intérieur du bouton http://jsfiddle.net/s5GVh/1415/
<button type="submit"><img src='https://aca5.accela.com/bcc/app_themesDefault/assets/gsearch_disabled.png'/></button>
la réponse de sshow l'a aussi fait pour moi:
navigation.css:
[...]
.buttonConfiguration {
width: 40px;
background-color: red; /* transparent; */
border: none;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: corbel;
font-size: 12px;
font-weight: normal;
margin: 1px 1px;
cursor: pointer;
background-image: url('../images/icons5/gear_16.png');
background-position: center; /* 0px 0px; */
background-repeat: no-repeat;
vertical-align: middle;
}
[...]
frameMenu.php:
[... PHP, Javascript and HTML code ...]
<!-- <li><a target="frameBody" href="admin/conf/confFunctions.php"><input type="button" class="buttonSuperAdmin" value="<?= $oLanguage->getExpression('confSettings', 'title', 'C e n t e r s') ?>"></a> -->
<li><a target="frameBody" href="admin/conf/confFunctions.php"><input type="button" class="buttonConfiguration" value=""></a>
<ul>
<li><a target="frameBody" href="admin/conf/getglobals.php "><input type="button" class="buttonSuperAdminSub" value="<?= $oLanguage->getExpression('centerSettings', 'confAdmin1', 'GetGlobals') ?>"></a></li>
<li><a target="frameBody" href="admin/conf/getcwd.php "><input type="button" class="buttonSuperAdminSub" value="<?= $oLanguage->getExpression('confSettings', 'centerAdmin2', 'GetCWD') ?>"></a></li>
</ul>
</li>
[...]
Je l'ai testé avec succès sous les dernières versions de Firefox et de Chrome (au 9 février 2019).
Ce que je voudrais faire c'est faire ceci:
<button type="submit" style="background-color:rgba(255,255,255,0.0); border:none;" id="resultButton" onclick="showResults();"><img src="images/search.png" /></button>
J'ai utilisé la couleur de fond: rgba (255,255,255,0,0); Ainsi, la couleur d'arrière-plan d'origine d'un bouton disparaît. La même chose avec la bordure: aucune; cela enlèvera la frontière originale.
Ajoutez simplement une icône dans l'élément du bouton, voici l'exemple
<button class="social-signup facebook">
<i class="fa fa-facebook-official"></i>
Sign up with Facebook</button>