Stil ändern / Blick von Asp: CheckBox mit CSS

StackOverflow https://stackoverflow.com/questions/112883

  •  02-07-2019
  •  | 
  •  

Frage

Ich will den Standard "3D" Look der Standard asp.net Checkbox ändern feste 1px zu sagen. Wenn ich versuche, das Styling der Grenze zum Beispiel anzuwenden es ist nur, dass - zieht den Standard Checkbox mit einer Umrandung -., Die gültig ist, ich denke,

Auf jeden Fall ist es eine Möglichkeit, zu ändern, wie die tatsächliche Textbox gestylt?

War es hilfreich?

Lösung

Ich denke, der beste Weg, CheckBox sieht wirklich anders zu machen ist nicht Checkbox Kontrolle überhaupt zu benutzen. Besser verwenden Sie Ihre eigenen Bilder für die aktiviert / deaktiviert Zustand on-top Hyperlink oder Bildelement. Prost.

Andere Tipps

Anstatt einige Nicht-Standard-Steuerung zu verwenden, was Sie tun sollten ist mit un-aufdringliche Javascript es nach der Tat zu tun. Siehe http://code.google.com/p/jquery-checkbox/ zum Beispiel.

Mit dem Standard ASP Checkbox vereinfacht den Code zu schreiben. Sie müssen keine eigene Benutzersteuerung schreiben, und alle vorhandenen Codes / Seiten haben nicht aktualisiert werden.

Noch wichtiger ist, es ist ein Standard-HTML-Steuerelement, das alle Browser erkennen kann. Es ist für alle Benutzer zugänglich, und die Arbeit, wenn sie nicht haben Javascript. Zum Beispiel Screen-Reader für Blinde können es als Kontrollkästchen Kontrolle verstehen, und nicht nur ein Bild mit einem Link.

Einfachstes beste Art und Weise, mit der ASP-Checkbox Steuerung mit kundenspezifisch anfertigen. 

 chkOrder.InputAttributes["class"] = "fancyCssClass";

Sie so etwas verwenden können .. hoffen, dass hilft

Warum Asp.net CheckBox Taste mit ToggleButtonExtender nicht verfügbar aus dem Ajax Control Toolkit.

Keine der oben genannten Arbeit gut bei der Verwendung von ASP.NET Web Forms und Bootstrap.

beendete ich mit bis Paul Sheriff Einfache Bootstrap CheckBox für Web Forms 

<style>
    .checkbox .btn, .checkbox-inline .btn {
    padding-left: 2em;
    min-width: 8em;
    }
    .checkbox label, .checkbox-inline label {
    text-align: left;
    padding-left: 0.5em;
    }
    .checkbox input[type="checkbox"]{
        float:none;
    }
</style>


<div class="form-group">
    <div class="checkbox">
        <label class="btn btn-default">
            <asp:CheckBox ID="chk1" runat="server" Text="Required" />
        </label>
    </div>
</div>

Das Ergebnis sieht wie folgt aus ...
Das Ergebnis sieht wie folgt aus

Nicht sicher, dass es wirklich eine asp.net Verwandte Frage .. Geben Sie Dies ist ein Schuss, viele gute Infos hier:

http://www.456bereastreet.com/archive/200409/styling_form_controls/

Beachten Sie, dass die asp:. CheckBox Kontrolle tatsächlich mehr gibt als nur eine einzige Option Eingang

Zum Beispiel meines Code Ausgänge 

<span class="CheckBoxStyle">
    <input id="ctl00_cphContent_cbCheckBox" 
           name="ctl00$cphContent$cbCheckBox"
           type="checkbox">
</span>

Dabei steht CheckBoxStyle ist der Wert des CssClass Attribut an die Steuerung angelegt und cbCheckBox ist die ID der Steuerung.

Um die Eingabe stylen, müssen Sie CSS schreiben Ziel 

span.CheckBox input {
  /* Styles here */
}

fügen Sie diesen Code in Ihren CSS und es können Sie Ihren Checkbox Stil anpassen. aber es ist nicht die beste Lösung, es ist ziemlich vielen Stil auf dem bestehenden Checkbox / Radiobutton angezeigt wird. 

   input[type='checkbox']:after 
{

        width: 9px;
        height: 9px;
        border-radius: 9px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #3B8054;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 3px solid #3B8054;
        transition: 0.5s ease;
        cursor: pointer;

}

input[type='checkbox']:checked:after 
    {
        background-color: #9DFF00;
    }

Sie sind abhängig von dem Browser wirklich.

Vielleicht könnten Sie etwas Ähnliches wie die Antwort in diese Frage über die Datei Schaltfläche Durchsuchen ändern.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top