html - img - the link not have the title attribute

El botón Enviar ha sido biselado, no puedo deshacerme de

Question

Estoy intentando deshacerme del borde y el bisel predeterminados que la mayoría de los navegadores / sistemas operativos han establecido como predeterminados en los botones Enviar. Cuando uso CSS para agregar una imagen de fondo, solo muestra la imagen en el fondo del botón, pero el bisel sigue ahí. ¿Hay alguna manera de hacer que el botón muestre solo mi imagen? ¿Es la única forma de hacerlo establecer la ruta de la imagen en la etiqueta src del elemento de entrada html?

Answer 1

Creo que puedes especificar cómo se verán el botón y el botón Enviar:

input[type=button], input[type=submit] { border: 0 }

Answer 2

Deberá quitar el borde (bisel) de esta manera:

input {
    border: 0;
}

Answer 3

Estaba teniendo el mismo problema en los botones de entrada. ¡Por una vez apareció IE8 como si quisiera "fuera de la caja" y fue Chrome quien decepcionó!

El CSS que me sirvió fue:

input[type="button"] {
    border: 0;
    border-width: 2px;
    border-color: white;
    border-style: solid;
}

borde: 0; elimina el bisel 3D (estilo de borde), luego lo reemplazo por un borde plano que se ve bien en IE8 y Chrome.

Answer 4

No recomendaría cambiar la apariencia del botón porque no será coherente con la apariencia de otros botones en los sitios web y será más difícil para los usuarios encontrarlos y reconocerlos como un botón de envío. Si realmente quieres seguir adelante, te recomiendo que hagas una prueba de usabilidad.

Answer 5

Puede establecer atributos de borde en CSS. siempre pienso

  border: 1px solid black;

se ve bien.

Answer 6

Puede usar CUALQUIER img como fondo (por ejemplo, esquinas redondeadas transparentes), solo en el css agregue "background-color: transparent;"

HTML (botón oficial de "enviar"): nada especial (no me gusta mezclar código con estilo):

<input type="submit" name="submit" id="mystyle" value="send e-mail"/>

luego en css (igual que un enlace normal, excepto los bordes de eliminación y el fondo predeterminado)

#mystyle {
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

Sin CSS como el botón de envío oficial, con CSS lo que hayas diseñado.

Probado: Chrome, IE, Opera

Answer 7

Puede usar algo como lo siguiente en una hoja de estilo (o dentro de la etiqueta <style>...</style> en la página) y usar algunos selectores de CSS avanzados:

input[type=submit], input[type=button], /* Advanced CSS selectors */
input.button /* For older browsers you can add a ''button'' class to each button where you want a bkg img */
{
  border: 0;
  background-image: url("/images/foo.png");
}

Answer 8

Puedes eliminar el borde usando las propiedades CSS del borde. Por ejemplo:

<input type=button value="Hello" style="border:0">

(Por supuesto, puedes mover esto a tu hoja de estilo).

Answer 9

Si desea utilizar su propia imagen de botón, deberá definir sus propios botones, de esta forma:

<div class="button">
  <a href="#">Login</a>
</div>

Y el CSS:

div.button
{
    position: relative;
    display: block;
    float: left;
    margin: 0;
    border: 0;
    padding: 0;
    background: url(button_right_normal.gif) no-repeat right top;
}

div.button a
{
    position: relative;
    display: block;
    margin: 0;
    border: 0;
    padding: 2px 15px 5px 15px;
    height: 18px;
    background: url(button_left_normal.gif) no-repeat left top;
    color: #ffffff;
    font-size: 11px;
    text-decoration: none;
}

Answer 10

Tenga en cuenta que Safari es muy terco con los botones de estilo de envío.

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

Es más flexible. Sin embargo, si está utilizando varios botones en un formulario, IE6 tiene problemas. IE también envía el innerHTML del elemento del botón, mientras que Firefox envía el atributo value (que tiene más sentido para mí).