HTML - le Style d'un Bouton de Formulaire

Je suis en train de style de mon bouton submit de mon formulaire. Je regardais dans le "bouton" de la balise, et ajouter dans ma feuille de style CSS, mais le bouton a encore un horrible style par défaut.

C'est ce que j'ai à ce jour:

<button name="visit_return_button" id="visit_return_button" type="submit" class="visit_return_button">
Increase
</button>

Mon style css est au travail, mais je reçois aussi un méchant à la recherche de bordure et la couleur de fond. J'étais à la recherche en JavaScript, mais je n'aime pas l'idée que tous les navigateurs n'ont JS active.

Ci-dessous une image du bouton, celui du haut est à quoi il ressemble, celui du bas est ce que sa supposons pour ressembler à:

HTML - le Style d'un Bouton de Formulaire

Voici mon CSS:

#visit_return_button{
    width:90px;
    height:30px;
    position:absolute;
    background-image: url(image/build_button.png);
    background-repeat: no-repeat;
    /*font-family: Tahoma, Geneva, sans-serif;*/
    font-size: 14px;
    font-weight: normal;
    color: #FFF;
    text-align: center;
    /*margin: auto;*/
    padding-top: 10px;
    margin-top:-20px;
}

Serais reconnaissant de toute aide, merci

veuillez fournir votre css
Pourriez-vous nous dire quel navigateur vous utilisez? Les différents navigateurs ont les différents obstacles à surmonter lorsqu'style des boutons. Aussi, "horrible" et "méchants" ne sont pas très bonnes descriptions si elles sont accompagnées de captures d'écran.
J'ai mis à jour ma question, désolé. Et je suis en utilisant google chrome, il le fait aussi dans safari
Pourquoi êtes-vous rembourrage sur le bouton et en lui donnant de la hauteur?
pouvez-vous fournir build_button.png ? Je suis en essais de trouver une solution.

OriginalL'auteur Oliver Jones | 2012-04-15

  1. 0

    Vous pouvez facilement faire votre bouton grâce à CSS3 Border-Radius de la propriété:-

    CSS

     #visit_return_button{
    background-color:#9C8C42;
    border: 2px solid #91782c;
    color: #FFF;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 10px;
    }

    HTML

    <button id="visit_return_button" type="submit">Increase</button>

    démo:- http://jsfiddle.net/VY8xs/3/

    OriginalL'auteur Shailender Arora

  2. 2

    Soit essayer de cacher la border comme border:0; et ajuster l'arrière-plan en fonction de vos besoins ou de ne pas utiliser une image de fond et essayer de le faire avec de la pure css et border-radius qui semble être une meilleure idée. Voir http://jsfiddle.net/qVkRs/1/

    padding: 0; line-height: 30px;
    mise à jour jsfiddle.net/qVkRs/1

    OriginalL'auteur worenga

  3. 1

    D'abord, vous voulez faire un style global pour vos boutons, sinon vous aurez à appliquer les styles à chaque bouton id qui sera beaucoup répété css. Puis modifier vos styles d'arrière-plan pour être comme ci-dessous. Après cela, vous pouvez ajuster le reste à l'air correct.

    input[type="button"], input[type="submit"], button
{
     background: none;
     background-image: url(image/build_button.png);
     background-position: center center;
     background-repeat: no-repeat;
     border: 0px;
     /* add the rest of your attributes here */
}

    Cela permettra d'appliquer ces styles à tous les boutons sur tout le site. Si vous avez besoin d'appliquer des styles supplémentaires à un bouton spécifique ou remplacer certaines des ci-dessus, puis utilisez l'identifiant et placez-la sous le code ci-dessus. Également de se débarrasser de l'class=" attribut" sur votre bouton de la balise, vous n'en avez pas besoin et il n'est pas utilisé autant que nous pouvons voir. Espérons que cette aide. Bonne Chance!

    OriginalL'auteur Ricketts

  4. 0

    Juste cacher les bords du bouton et réglez la couleur de fond

    background:#ffffff url('your_image.png');
    le #ffffff est inutile.

    OriginalL'auteur Nidis

  5. 0

    Voici ma solution; j'ai testé avec tous les principaux navigateurs et il fonctionne très bien, même sans l'image de fond. Sauf IE8 ne pas faire des coins arrondis.

    http://jsfiddle.net/uSphG/3/

    J'ai ajouté quelques propriétés de style, juste au cas où. Certaines fonctionnalités ont des valeurs par défaut différentes sur les différents navigateurs.

    button::-moz-focus-inner {
 padding: 0 !important;
 border: none !important;
}

#visit_return_button{
 display:inline-block;
 width:90px;
 padding:0; margin:0; outline:0;
 background:#9B8C47;
 background-image: url(image/build_button.png);
 background-repeat: no-repeat;
 /*font-family: Tahoma, Geneva, sans-serif;*/
 border:1px solid #866517;
 -moz-border-radius:0.4em;
 border-radius:0.4em;
 font-size: 14px; line-height:24px;
 font-weight: normal;
 color: #FFF;
 text-align: center;
 /*margin: auto;*/
}

    OriginalL'auteur Mr Lister

  6. 0

    Je pense que vous tentez de supprimer la frontière. Cela peut être fait avec:

    border:none;

    J'ai pris la liberté de la remise en place de l'original CSS ici:

    #visit_return_button{
    width:90px;
    height:30px;
    font:14px Tahoma, Geneva, sans-serif;
    background:url(image/build_button.png) no-repeat;
    color:#fff;
    text-align:center;
    border:none; /* removal of border */
}

    Aussi, si c'est un formulaire, il est mieux d'utiliser:

    <input type="button" value="Increase"/>

    pour les boutons; et:

    <input type="submit" value="Increase"/>

    pour SOUMETTRE les boutons spécifiquement.

    Pourquoi est - input type="button" mieux que button?
    Parce qu'il est compatible avec toute autre méthode de saisie dans un formulaire; en outre, il est plus concis. Le <button></button> balises sont destinées à un bouton qui englobe d'autres éléments html. Voir: stackoverflow.com/questions/469059/...
    Je vais vous donner plus concis et pas de code HTML. Mais pas tous les contrôles sont input éléments; penser de ces zones de texte, sélectionne, des liens...

    OriginalL'auteur Hawken

  7. -2

    Les bibliothèques sont souvent une bonne solution pour le style de boutons de manière cohérente à travers plusieurs types de navigateur. Découvrez jQuery boutons, YUI Boutons, et il y a beaucoup de d'autres.

    l'ajout de java-script juste pour un simple bouton est ridicule

    OriginalL'auteur Larry K