Comment faire un glyphicon travail comme un bouton soumettre?
J'ai un bouton de type Submit
avec le texte que edit
pour la méthode POST dans asp.net HTML.BeginForm.Je veux le remplacer par un glyphicon-edit
.Comment obtenir la même fonctionnalité que input
.Je suis en mesure de réaliser les fonctionnalités à l'aide du bouton Edit.Je veux la même fonctionnalité à l'aide de glyphicon-edit
HTML
<br />
<input type="submit" class="btn btn-default" name="Editing" value="Edit" />
<div class="circle">
<div class="glyphicon glyphicon-edit"></div>
</div>
CSS et Look de glyphicon-edit
est inclus dans un violon ici
Vous devez vous connecter pour publier un commentaire.
Vous pouvez écrire un bouton avec un type
submit
et l'envelopper d'un glyphicon à l'intérieur deEdit :
background:none;border:none;padding:0;
) et appliquer le nouveau styleoutline:none
devrait résoudre le contour question onclick.background:none; border:none;padding:0;
) couleur d'arrière-plan, bordure,remplissage sont juste à la propriété par défaut d'un boutonoutline:none;
permettrait de résoudre le contour question onclick. je ne pouvais pas voir la frontière sur le mien.Utiliser au-dessus de html et css:
Html:
Css :
J'ai ajouté une classe nommée
submit-with-icon
dans lequel je suis la suppression des frontières et de faire un fond transparent.Voici de travail violon.
De ce que je peux voir, il n'est pas nécessaire d'utiliser d'autres éléments. Utiliser un
<button>
élément pour le bouton soumettre, au lieu de<input>
, et d'appliquer lesglyphicon-edit
classe directement.Style en vol stationnaire, l'accent et les états actifs comme vous le souhaitez et supprimer le focus par défaut dans le plan.
Le glyphe est centrée verticalement avec
line-height
.Exemple
CSS:
HTML:
Essayez ceci 🙂
CSS:
HTML: