Bouton soumettre a biseau je ne peux pas vous débarrasser de

Je suis en train d'essayer de se débarrasser de la valeur par défaut de biseau et de la frontière que la plupart des navigateurs/OS ont mis par défaut sur les boutons de soumission. Lorsque j'utilise le CSS pour ajouter une image d'arrière-plan, il est simplement l'affichage de l'image en arrière-plan du bouton, mais le biseau est toujours là. Est-il un moyen de rendre le bouton afficher mon image? Est la seule façon de le faire que pour définir le chemin de l'image dans le répertoire src de la balise du code html de l'élément d'entrée?

InformationsquelleAutor Graham | 2009-05-12

42

Vous aurez besoin d'enlever la frontière (en biseau) comme suit:
```
input {
    border: 0;
}
```
InformationsquelleAutor janhartmann
4

Vous pouvez définir la frontière attributs CSS. Je pense toujours à
```
  border: 1px solid black;
```
a l'air sympa.

InformationsquelleAutor kristina
4

Je ne recommande pas de changer l'apparence du bouton, car il ne sera pas compatible avec la façon dont les autres boutons sur les sites web look et sera plus difficile pour les utilisateurs à trouver et à reconnaître comme un bouton de soumission. Si vous voulez vraiment aller de l'avant, je recommande fortement de faire un test d'utilisabilité.
- Pourquoi en était-il voté contre, si sévèrement ?
- Upvoted, en réponse à de bons conseils concernant l'INTERFACE utilisateur. Pas, j'accepte de répondre à la question, mais certainement la peine d'avis.
- +1 moi aussi, je dois le mentionner. C'est un argument valable. Mais parfois, les clients il suffit de ne pas bouger.
- Vous ne devez être prudent, bien sûr. Mais une couverture recommandation contre la modification de l'apparence n'est pas un bon conseil à mon avis. Et cela ne répond pas à la question.
- Vous devriez changer complètement l'apparence des boutons. Le navigateur par défaut de style, c'est moche. Vous n'avez pas besoin d'un test d'utilisabilité.
InformationsquelleAutor Zian Choy

Si vous souhaitez utiliser votre propre image du bouton, puis vous devrez définir vos propres boutons, comme ceci:

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

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

InformationsquelleAutor Clayton

1

Vous pouvez supprimer la bordure à l'aide de la frontière des propriétés CSS. Par exemple:
```
<input type=button value="Hello" style="border:0">
```
(Vous pouvez bien sûr déplacer dans votre feuille de style.)

InformationsquelleAutor Laurence Gonsalves
1

Vous pouvez utiliser n'IMPORTE quel img comme arrière-plan(par exemple transparent coins arrondis), juste dans le css ajouter "background-color: transparent;"

HTML(standard officiel bouton "soumettre") - rien de spécial(je n'aime pas le mélange de code avec style):
```
<input type="submit" name="submit" id="mystyle" value="send e-mail"/>
```
ensuite dans le css(même comme un lien normal à l'exception de tuer des bordures et arrière-plan par défaut)
```
#mystyle {
background-color: transparent;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
```
Sans CSS comme officiel le bouton soumettre, avec les CSS ce que vous avez conçu.

Testé: Chrome, IE, Opera

InformationsquelleAutor Csiga
1

J'ai eu le même problème sur les boutons d'entrée. Pour une fois que IE8 a été apparaissant comme je le voulais "out-of-the-box", et c'est google Chrome qui déçu!

Le CSS qui a fait le tour pour moi a été:
```
input[type="button"] {
    border: 0;
    border-width: 2px;
    border-color: white;
    border-style: solid;
}
```
border: 0; supprime la 3D biseautage (style de bordure), puis-je le remplacer avec un plat à la recherche de la frontière qui rend bien dans les deux IE8 et Chrome.

InformationsquelleAutor Ian Robertson

Vous pouvez quelque chose comme ce qui suit à une feuille de style (ou dans au <style>...</style> tag sur la page) et de l'utilisation des sélecteurs CSS:

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

InformationsquelleAutor

0

Noter que Safari est très têtu avec style les boutons de soumission.
```
<button type="submit"></button>
```
Est plus souple. Toutefois, si vous utilisez plusieurs boutons dans un formulaire, IE6 a des problèmes. IE soutient également la innerHTML de l'élément de bouton, tandis que Firefox soumet le value attribut (qui fait plus de sens pour moi).

InformationsquelleAutor alex
0

je pense que vous pouvez spécifier la façon dont le bouton et le bouton de validation ressembler à:
```
input[type=button], input[type=submit] { border: 0 }
```
InformationsquelleAutor nopole
0

Je cherchais la réponse, a vu cela et a décidé de peser après, j'ai réalisé le fix. Toutes les réponses ci-dessous sont correctes et utiles au point qu'une petite bordure grise est encore visible.

Personne n'a indiqué: background-size: cover;

Qui a supprimé le dernier peu de gris à partir du bouton.

InformationsquelleAutor Jonk

Vous devez vous connecter pour publier un commentaire.