Changer le style / look de Asp: CheckBox en utilisant CSS

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

  •  02-07-2019
  •  | 
  •  

Question

Je souhaite modifier la norme " 3D " look de la case à cocher asp.net standard pour dire 1px solide. Si j’essaie d’appliquer le style à la bordure, par exemple, c’est exactement cela qui dessine la case à cocher standard entourée d’une bordure, ce qui est valide, je suppose.

Quoi qu'il en soit, existe-t-il un moyen de changer le style de la zone de texte?

Était-ce utile?

La solution

Je pense que la meilleure façon de rendre CheckBox vraiment différent est de ne pas utiliser le contrôle de case à cocher. Mieux vaut utiliser vos propres images pour l’état coché / décoché en haut du lien hypertexte ou de l’élément image. Cheers.

Autres conseils

Plutôt que d’utiliser un contrôle non standard, vous devriez plutôt utiliser du javascript non envahissant pour le faire après coup. Voir http://code.google.com/p/jquery-checkbox/ . à titre d'exemple.

L'utilisation de la case à cocher ASP standard simplifie l'écriture du code. Vous n'avez pas à écrire votre propre contrôle utilisateur et tous vos codes / pages existants ne doivent pas être mis à jour.

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

La meilleure façon, en utilisant le contrôle de case à cocher ASP avec une conception personnalisée. 

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

vous pouvez utiliser quelque chose comme ça .. espère que cela aide

Pourquoi ne pas utiliser le bouton Asp.net CheckBox avec ToggleButtonExtender disponible dans la boîte à outils du contrôle Ajax.

Aucune des solutions ci-dessus ne fonctionne correctement lorsque vous utilisez ASP.NET Web Forms et Bootstrap.

J'ai fini par utiliser le Simple de Paul Sheriff. Bootstrap CheckBox 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 ...
Le résultat ressemble à ceci

Je ne suis pas sûr que ce soit vraiment une question liée à asp.net .. Donnez-lui un coup de feu, plein de bonnes informations ici:

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

N'oubliez pas que le contrôle asp: CheckBox génère en réalité plus d'une seule entrée de case à cocher.

Par exemple, mes sorties de code 

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

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

Pour styliser l'entrée, vous devez écrire du CSS pour cibler 

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

collez ce code dans votre css pour personnaliser votre style de case à cocher. Cependant, ce n'est pas la meilleure solution, c'est plutôt d'afficher votre style au-dessus de la case à cocher / du radiobutton existants. 

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

Ils dépendent vraiment du navigateur.

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top