Wie man ein glyphicon Arbeit als einen submit-button?

Habe ich eine Schaltfläche vom Typ Submit mit text als edit für POST-Methode in asp.net HTML-Code.BeginForm.Ich möchte, um es zu ersetzen mit einem glyphicon-edit.Wie erreichen Sie die gleiche Funktionalität wie input.Ich bin in der Lage zu erreichen die Funktionalität, indem Sie Bearbeiten button.Ich möchte die gleiche Funktionalität mit 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 und Aussehen glyphicon-edit enthalten ist ein fiddle hier

InformationsquelleAutor Raviteja | 2015-12-07

  1. 21

    Schreiben Sie eine Schaltfläche mit einem Typ submit und wickeln Sie ein glyphicon innen

    <button type="submit">
   <span class="glyphicon glyphicon-edit"></span>
</button>

    Edit :

    • Die Schaltfläche Stil wird angewendet, um glyphicon, aber Sie können remote die Schaltfläche Standard, css-Eigenschaften (zB. background:none;border:none;padding:0;) und die Anwendung von neuen Stil
    • onclick Rand angezeigt wird ? - outline:none lösen sollte die Gliederung Grenzstreitigkeiten onclick.
    wenn ich diese,die Stile der Schaltfläche angewendet werden,das will ich nicht.Siehe meine Geige.
    Sie können immer überschreiben/annullieren die Schaltfläche Standard-css-Eigenschaft. (Für zB. background:none; border:none;padding:0;) background-color, border,padding sind nur die default-Eigenschaft der Schaltfläche
    klicken Sie auf Rand angezeigt wird hier
    tut outline:none; zu lösen wäre die Gliederung Grenzstreitigkeiten onclick. ich konnte nicht sehen, die Grenze in mir.

    InformationsquelleAutor Suman K.C

  2. 6

    Nutzung über html und css:

    Html: 

    <div class="circle">
   <button type="submit" class="submit-with-icon">
     <span class="glyphicon glyphicon-edit"></span>
   </button>
</div>

    Css :

    .circle {
  border-radius: 100%;
  border: 0.25em solid black;
  height: 50px;
  width: 50px;
}
.glyphicon.glyphicon-edit{
  font-size:28px;
  padding: 8px 3px 0 8px;
}

.submit-with-icon {
  background: transparent;
    border: 0px;
    padding: 0;
    outline: 0;
}

.circle:active {
  content: '';
  background-color: rgb(235, 235, 235);
  border-color: rgb(173, 173, 173);
}

    Habe ich eine Klasse namens submit-with-icon in denen ich bin das entfernen die Grenze und macht den hintergrund transparent.

    Hier arbeitet fiddle.

    Grenze ist, die auf einen Klick
    Ich habe das update meiner Antwort und fiddle. Hinzufügen outline: 0; Einreichen-mit-Symbol-Klasse, wird Es zu entfernen-klicken Sie auf Grenze.

    InformationsquelleAutor Noopur Dabhi

Schreibe einen Kommentar