it-swarm.com.de

HTML/CSS Wie füge ich ein Bildsymbol zur Eingabe hinzu = "button"?

Ich verwende das unten stehende CSS, aber es wird ein Bild in die Mitte der Schaltfläche gesetzt. Gibt es eine Möglichkeit, ein Symbol mithilfe von <input type="button"> nach links oder rechts auszurichten, damit Text und Bild gut passen und ausrichten?

background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;
98
Brett

Wenn Sie unbedingt input verwenden müssen, versuchen Sie Folgendes:

background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;

Es ist normalerweise etwas einfacher, eine button mit einer img im Inneren zu verwenden:

<button type="submit"><img> Text</button>

Die Browserimplementierungen von button für das Senden sind jedoch inkonsistent, und die Tatsache, dass alle Schaltflächenwerte gesendet werden, wenn button verwendet wird. Dadurch wird die Erkennung, auf die mit einem Klick geklickt wurde, in einem Formular mit mehreren Absendungen beendet.

135
Delan Azabani

Dies sollte das tun, was Sie möchten, vorausgesetzt, das Bild Ihrer Schaltfläche ist 16 mal 16 Pixel groß.

<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 */
}

Beispielschaltfläche:

example button

Update

Wenn Sie Less verwenden, kann dieses Mixin nützlich sein.

.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);
}

Das oben genannte kompiliert in

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;
}

JSFiddle

72
sshow
<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>

Ich hoffe das hilft dir.

8
Ferdiyan Syah

Wenn Sie Spritesheets verwenden, wird dies unmöglich und das Element muss umbrochen werden.

.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;
}

Schauen Sie sich diese Geige an: http://jsfiddle.net/AJNnZ/

2
Jake Cattrall

sie können diesen Trick ausprobieren!

1.) mach das:

<label for="img">
   <input type="submit" name="submit" id="img" value="img-btn">
   <img src="yourimage.jpg" id="img">
</label>

2.) style es!

<style type="text/css">
   img:hover {
       cursor: pointer;
   }
   input[type=submit] {
       display: none;
   }
</style>

Es ist nicht sauber, aber es wird die Arbeit machen!

1
upvote

sie können versuchen, ein Bild in den Button einzufügen http://jsfiddle.net/s5GVh/1415/

<button type="submit"><img src='https://aca5.accela.com/bcc/app_themesDefault/assets/gsearch_disabled.png'/></button>
0
Vuong Passion

Dies ist der minimal benötigte Stil, der das Bild an die Standardgröße der Schaltfläche anpasst:

<input type="button" value=" " style="background-image: url(http://www.geppoz.eu/geppoz.png);background-size:100% 100%;">

der Wert "spaced" wird benötigt, um die Grundlinienausrichtung beizubehalten, für den Fall, dass Sie ihn benötigen ...

0

sshows Antwort hat es auch für mich getan:

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>

[...]

Ich habe dies erfolgreich unter den neuesten Versionen von Firefox und Chrome getestet (Stand 9. Februar 2019).

0
mtjmohr

Was ich tun würde, ist dies zu tun: 

Verwenden Sie einen Schaltflächentyp

 <button type="submit" style="background-color:rgba(255,255,255,0.0); border:none;" id="resultButton" onclick="showResults();"><img src="images/search.png" /></button>

Ich habe Hintergrundfarbe verwendet: rgba (255,255,255,0,0); Damit verschwindet die ursprüngliche Hintergrundfarbe einer Schaltfläche. Dasselbe mit der Grenze: keine; es wird die ursprüngliche Grenze wegnehmen.

0
James111

Fügen Sie einfach ein Symbol im Schaltflächenelement hinzu. Hier ist das Beispiel

   <button class="social-signup facebook"> 
     <i class="fa fa-facebook-official"></i>  
      Sign up with Facebook</button>
0
bilal