Changer le style / look d'Asp: CheckBox en utilisant CSS

Je veux changer la norme "3D" regardez de la norme asp.net case-à-dire solid 1px. Si j'essaie d'appliquer le style à la Frontière par exemple, il n'est rien de plus que des tirages de la norme case avec une bordure autour (ce qui est valable je pense.

De toute façon, est-il un moyen de changer la façon dont le réel de zone de texte est de style?

source d'informationauteur JamesSugrue | 2008-09-22

  1. 6

    Je pense que la meilleure façon de faire de Case a l'air vraiment différent, c'est de ne pas utiliser de contrôle de case à cocher. Mieux utiliser vos propres images pour cochée/décochée de l'état sur le lien hypertexte, ou élément d'image. Des acclamations.

  2. 13

    Plutôt que d'utiliser certains non-standard de contrôle, ce que vous devez faire, c'est à l'aide de l'onu discret javascript pour le faire après le fait. Voir http://code.google.com/p/jquery-checkbox/ pour un exemple.

    L'aide de la norme ASP case simplifie l'écriture du code. Vous n'avez pas à écrire votre propre contrôle de l'utilisateur, et tous de votre code existant/pages n'ont pas à être mis à jour.

    Plus important encore, il s'agit d'une norme HTML de contrôle que tous les navigateurs peuvent les reconnaître. Il est accessible à tous les utilisateurs, et de travailler s'ils n'ont pas javascript. Par exemple, les lecteurs d'écran pour les aveugles sera en mesure de le comprendre comme un contrôle de case à cocher, et pas juste une image avec un lien.

  3. 2

    Pourquoi ne pas l'utiliser Asp.net Case à cocher bouton avec ToggleButtonExtender disponible à partir de l'Ajax control toolkit.

  4. 2

    Aucun de ces travaux lors de l'utilisation d'ASP.NET des Formulaires Web et Bootstrap.

    J'ai fini à l'aide de Paul du Shérif Simple Bootstrap Case à cocher pour les Formulaires Web

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

    Le résultat ressemble à ceci...

    Changer le style /look d'Asp: CheckBox en utilisant CSS

  5. 2

    Plus simple de la meilleure façon, à l'aide de l'ASP contrôle de case à cocher avec un design personnalisé.

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

    vous pouvez utiliser quelque chose comme ça.. hope qui aide

  6. 1

    Pas sûr que c'est vraiment un asp.net liés à la question.. Donner un coup de cette, beaucoup de bonnes infos ici:

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

  7. 1

    Gardez à l'esprit que la asp:Case de contrôle des sorties plus que juste une seule case de saisie.

    Par exemple, mon code sorties

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

    où CheckBoxStyle est la valeur de la CssClass attribut appliqué pour le contrôle et la cbCheckBox est l'ID de la commande.

    De style de l'entrée, vous devez écrire du CSS pour cibler

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

    collez ce code dans votre css et il vous permettra de personnaliser votre style de checkbox. cependant, ce n'est pas la meilleure solution, c'est à peu près de l'affichage de votre style sur le dessus de la case existante/radiobutton.

       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;
    }
  9. 0

    Ils sont dépendants sur le navigateur vraiment.

    Peut-être que vous pourriez faire quelque chose de similaire à la réponse dans cette question sur la modification du fichier bouton parcourir.