HTML / CSS ¿Cómo agregar un icono de imagen a input type = "button"?
Estoy usando el CSS de abajo, pero pone una imagen en el centro del botón. ¿Hay alguna forma de alinear a la izquierda o a la derecha un icono usando <input type="button">
, para que el texto y la imagen encajen y se alineen bien?
background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;
10 answers
Si es absolutamente necesario usar input
, pruebe esto:
background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;
Normalmente es un poco más fácil usar un button
con un img
dentro:
<button type="submit"><img> Text</button>
Sin embargo, las implementaciones del navegador de button
para enviar son inconsistentes, así como el hecho de que todos los valores de los botones se envían cuando se usa button
, lo que elimina la detección de "qué botón hizo clic" en un formulario de envío múltiple.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-05-27 10:21:42
Esto debería hacer lo que quieras, asumiendo que la imagen del botón es de 16 por 16 píxeles.
<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 */
}
Botón de ejemplo:
Update
Si usas menos, este mixin podría ser útil.
.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);
}
Lo anterior compila 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-06 12:39:45
<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>
Espero que esto te ayude.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-16 14:06:27
Si está utilizando spritesheets, esto se vuelve imposible y el elemento debe estar envuelto.
.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;
}
Mira este violín: http://jsfiddle.net/AJNnZ /
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-04 09:35:08
¡Puedes probar este truco!
1st) haga esto:
<label for="img">
<input type="submit" name="submit" id="img" value="img-btn">
<img src="yourimage.jpg" id="img">
</label>
2nd) estilo!
<style type="text/css">
img:hover {
cursor: pointer;
}
input[type=submit] {
display: none;
}
</style>
No está limpio, pero hará el trabajo!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-12 10:39:44
Lo que haría es hacer esto:
Utilice un tipo de botón
<button type="submit" style="background-color:rgba(255,255,255,0.0); border:none;" id="resultButton" onclick="showResults();"><img src="images/search.png" /></button>
Utilicé background-color:rgba(255,255,255,0.0); Para que el color de fondo original de un botón desaparezca. Lo mismo con la frontera: ninguna; quitará la frontera original.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-16 07:05:20
Simplemente agregue el icono en el elemento de botón aquí está el ejemplo
<button class="social-signup facebook">
<i class="fa fa-facebook-official"></i>
Sign up with Facebook</button>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-17 14:09:21
Puedes intentar insertar imagen dentro del botón http://jsfiddle.net/s5GVh/1415 /
<button type="submit"><img src='https://aca5.accela.com/bcc/app_themesDefault/assets/gsearch_disabled.png'/></button>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-14 08:36:18
Este es el estilo mínimo necesario, ajustando la imagen al tamaño de botón predeterminado:
<input type="button" value=" " style="background-image: url(http://www.geppoz.eu/geppoz.png);background-size:100% 100%;">
El valor "espaciado" es necesario para mantener la alineación de línea de base, en caso de que lo necesite...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-28 12:25:44
<img src="http://www.pic4ever.com/images/2mpe5id.gif">
<button class="btn btn-<?php echo $settings["button_background"]; ?>" type="submit"><?php echo $settings["submit_button_text"]; ?></button>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-07 23:22:06