Faire une case à cocher ressembler à un bouton CSS

Je pense que ce que je suis en train de réaliser peut être fait plus facilement. Cependant, j'ai peu de JS expérience et aucun dans la voie de la CSS. Donc je suis en utilisant prédéfinis CSS et le code JS et la subtilité de le modifier. Je vais donc expliquer mon objectif final et de voir si ce que j'ai actuellement est acceptable.

  1. Un menu du haut sur la page web qui a des boutons et des cases à cocher toutes les inspecter visuellement le même
  2. Je voudrais des cases à cocher pour ressembler à des boutons, par exemple, pas de case à cocher, seule l'étiquette.
  3. J'aimerais que la case à cocher pour conserver sa fonctionnalité comme une case à cocher donné le code JS c'est l'appel de
  4. Est la façon dont je vais appeler le code JS via le bouton checkbox et de corriger ou trop compliqué?

JSFiddle

<li><a title="Zoom to U.S" input type="button" name="US" onclick="US();"><span>Zoom to U.S.</span></a></li>  
<li><a title="Test 1 KML"><input type="checkbox" id="kml-red-check" name="kml-red-check" onclick="toggleKml("red");"><span>Test 1 KML</span></a></li>
  • Paire de la case avec une étiquette, masquer la case à cocher et le style de l'étiquette de la faire ressembler à un bouton
  • Chaque fois que j'ajoute le '/** * Start by hiding the checkboxes */ input[type=checkbox] { visibility: hidden; } il s'arrête de fonctionner
  • Je tiens à ajouter que vous devriez ne jamais les utiliser onclick sur une case à cocher ou un bouton radio depuis ce ne couvre pas les autres méthodes de basculement (par exemple par l'intermédiaire du clavier ou en cliquant sur l'étiquette). Utilisation onchange à la place. C'est probablement aussi la raison pour laquelle cela ne fonctionne pas lorsque vous masquer la case à cocher.
  • J'ai changé le onclick à onchange et j'présentent toujours les mêmes résultats quand j'masquer la case à cocher via CSS
  • Est-il une raison spécifique que vous avez saisie des éléments à l'intérieur d'un tag?
  • Je suis à rassembler des informations pour obtenir des résultats. Que dois-je faire pour corriger cela?
  • voir ma réponse mis à jour

InformationsquelleAutor JeremyA1 | 2013-11-12
  1. 3

    html:

    <input type="checkbox" class="hidden" name="cb" id="cb"><label for="cb">text</label>

    css:

    .hidden {position:absolute;visibility:hidden;opacity:0;}
input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
}

    http://css-tricks.com/almanac/selectors/c/checked/

    Ne fonctionne pas sur les lt IE9 bien.

    edit: Suite à vos balisage il devrait être quelque chose comme ceci:

    <ul>
<li><input id="cb1" name="cb1-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb1\')',100);"><label for="cb1" onclick="setTimeout('checkIt(\'cb1\')',100);">text 1</label></li>
<li><input id="cb2" name="cb2-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb2\')',100);"><label for="cb2" onclick="setTimeout('checkIt(\'cb2\')',100);">text 2</label></li>
</ul>

    Et de vérifier ensuite si la case est cochée ou non dans votre fonction.
    onchange /onclick dans une case qui ne fonctionne pas dans IE

    édité de nouveau: modification de l'attribut NAME de sorte que vous ne finissent pas avoir des problèmes plus loin le long de la ligne. Et ajouté un peu de solution de contournement pour le ne répond pas, mais en fin de compte souhaité, onchange fonctionnalité dans IE8. Finalement, vous devez ajouter un compte à rebours pour votre fonction, plutôt que dans la ligne.

    function checkIt(e){
    if(document.getElementById(e).checked){
    alert('checked');
    } else {
    alert('unchecked');
    }
}
    • Cela a fonctionné pour moi. Je ne suis pas inquiet au sujet de la version IE9 depuis que j'ai un générique CSS que je suis de chargement pour IE9 et ci-dessous merci.
    • O, il va travailler dans IE9. Tout simplement pas une version jusqu'à IE9.
    • J'ai testé plus tôt, j'ai vu que le remercier de travail est parfait et vous aide-moi par l'ajout de l'option de couleur ainsi. Merci encore
    InformationsquelleAutor ravb79
  2. 7

    Il n'est pas possible de changer l'apparence d'une case à cocher si radicalement à l'aide de CSS.

    Ce que vous POUVEZ faire cependant, c'est le style de l'élément label assez pour la faire ressembler à un bouton. En raison de la nature de l'élément label, en cliquant dessus, il va passer à l'état de la case à cocher garder votre fonctionnalité intact.

    Ici est de savoir comment le faire

    Balisage

    <li>
    <label for="kml-red-check">I am a button!</label>
    <input type="checkbox" id="kml-red-check" name="kml-red-check" onchange="toggleKml("red");">
</li>

    Noter que j'ai changé la onclick gestionnaire de onchange puisqu'il est impossible de cliquer sur la case elle-même. Sa valeur change quoique lorsque vous cliquez sur l'étiquette

    Style

    label[for="kml-red-check"]{
   //Your CSS goes that makes the label look like a button goes here
}
#kml-red-check{
    display:none;
}
    • Le CSS que j'utilise est téléchargé, comme indiqué dans ma JSFiddle. Je pense que l'entrie code rend le bouton, je ne suis pas sûr.
    • Dans votre violon je ne vois pas que vous utilisez le for attribut de la label champ. Le for doit contenir le id de la case que vous souhaitez lier l'étiquette avec...
    • Je suis en cours d'exécution sur mon serveur WAMP et faire des changements sur les là puisque ce code est jumelé avec un grand nombre de code JS
    • Voir cet Exemple :VIOLON.ce sera utile pour vous
    • J'ai mis à jour le code sur JSFiddle
    • Veuillez lire attentivement les exemples écrits dans les réponses attentivement. Le for attribut est tout à fait nécessaire dans les étiquettes, et je ne vois pas de n'importe où dans votre code. Je vais juste laisser ça ici 🙂

    InformationsquelleAutor Loupax
  3. 0
    <label>
  <input type="checkbox" ng-model="vm.abc" ng-change="vm.go()"/>
  <span>this is button add some css to lokking like a button</span>
</label>

    cela fonctionne comme le bouton , si vous ne voulez pas montrer case utiliser ce

    <label>
  <input type="checkbox" ng-model="vm.abc" ng-change=vm.go()" hidden=''/>
  <span>this is button add some css to lokking like a button</span>
</label>

    check it out ici https://jsfiddle.net/h0ntpwqk/2/

    InformationsquelleAutor shubham kucheria