Cambia stile / aspetto di Asp: CheckBox usando CSS

Question

Voglio cambiare lo standard "3D" guarda la casella di controllo standard asp.net per dire solido 1px. Se provo ad applicare lo stile al bordo, ad esempio, fa proprio questo - disegna la casella di controllo standard con un bordo attorno ad esso - che è valido immagino.

In ogni caso, c'è un modo per cambiare il modo in cui la casella di testo attuale è in stile?

Answer 1

Penso che il modo migliore per rendere CheckBox davvero diverso sia di non usare affatto il controllo checkbox. Utilizzare meglio le proprie immagini per lo stato selezionato / non selezionato sopra il collegamento ipertestuale o l'elemento immagine. Cin cin.

Answer 2

Invece di usare un controllo non standard, quello che dovresti fare è usare javascript non invadente per farlo dopo il fatto. Vedi http://code.google.com/p/jquery-checkbox/ per un esempio.

L'uso della casella di controllo ASP standard semplifica la scrittura del codice. Non è necessario scrivere il proprio controllo utente e non è necessario aggiornare tutti i codici / pagine esistenti.

Ancora più importante, è un controllo HTML standard che tutti i browser possono riconoscere. È accessibile a tutti gli utenti e funziona se non hanno JavaScript. Ad esempio, gli screen reader per i non vedenti saranno in grado di capirlo come un controllo casella di controllo e non solo un'immagine con un collegamento.

Answer 3

Il modo migliore più semplice, usando il controllo casella ASP con design personalizzato.

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

puoi usare qualcosa del genere .. spero che aiuti

Answer 4

Perché non usare il pulsante CheckBox Asp.net con ToggleButtonExtender disponibile dal toolkit di controllo Ajax.

Answer 5

Nessuna delle opzioni precedenti funziona bene quando si utilizzano ASP.NET Web Forms e Bootstrap.

Ho finito per usare rel="nofollow noreferrer"> Simple Bootstrap CheckBox per Web Form

<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>

Il risultato è simile al seguente ...

Answer 6

Non sono sicuro che si tratti davvero di una domanda relativa ad asp.net. Provalo, molte buone informazioni qui:

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

Answer 7

Tieni presente che il controllo asp: CheckBox produce effettivamente più di un singolo input di casella di controllo.

Ad esempio, i miei output di codice

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

dove CheckBoxStyle è il valore dell'attributo CssClass applicato al controllo e cbCheckBox è l'ID del controllo.

Per dare uno stile all'input, devi scrivere CSS come target

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

Answer 8

incolla questo codice nel tuo CSS e ti permetterà di personalizzare il tuo stile di casella di controllo. tuttavia, non è la soluzione migliore, mostra praticamente il tuo stile sopra la casella di controllo / pulsante di opzione esistente.

   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;
    }

Answer 9

Sono veramente dipendenti dal browser.

Forse potresti fare qualcosa di simile alla risposta in questa domanda sulla modifica del pulsante Sfoglia file.