web-dev-qa-db-fra.com

Pouvez-vous styler les boutons de formulaire html avec css?

Je n'aime pas le style de bouton par défaut. C'est vraiment ennuyeux. j'utilise

<input type="submit">

boutons de type. Puis-je les nommer en quelque sorte en css? Sinon, je suppose que l’autre façon de le faire serait d’utiliser un div à la place et d’en faire un lien. Comment faites-vous travailler ces formulaires?

htmlcssforms
27
Alex Mohr

Vous pouvez facilement atteindre votre objectif via CSS: -

[~ # ~] html [~ # ~] 

<input type="submit" name="submit" value="Submit Application" id="submit" />

[~ # ~] css [~ # ~] 

#submit {
    background-color: #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:6px;
    color: #fff;
    font-family: 'Oswald';
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    border:none;
}



#submit:hover {
    border: none;
    background:red;
    box-shadow: 0px 0px 1px #777;
}

[~ # ~] démonstration [~ # ~]

46
Shailender Arora

Oui, c'est assez simple:

input[type="submit"]{
  background: #fff;
  border: 1px solid #000;
  text-shadow: 1px 1px 1px #000;
}

Je recommande de lui attribuer un identifiant ou un cours afin de pouvoir le cibler plus facilement.

17
ncksllvn

Oui, vous pouvez cibler ces personnes en utilisant input[type=submit] par exemple.

.myFormClass input[type=submit] {
  margin: 10px;
  color: white;
  background-color: blue;
}
3
Dave Anderson

Vous pouvez directement créer votre propre style de cette façon:

 input[type=button]
 { 
//Change the style as you like
 }
3
Ricky Youssef

Vous voudrez peut-être ajouter:

-webkit-appearance: none;

si vous en avez besoin d'une apparence cohérente sur Mobile Safari ...

1
achoukah

écrire le style ci-dessous dans la même section de tête de fichier html ou écrire dans un fichier .css

<style type="text/css">
.submit input
    {
    color: #000;
    background: #ffa20f;
    border: 2px outset #d7b9c9
    }
</style>

<input type="submit" class="submit"/>

.submit - in css. signifie classe, donc j'ai créé soumettre la classe avec un ensemble d'attributs
et a appliqué cette classe à la balise submit en utilisant l'attribut class

0
Raj Adroit