带有Tabing突出显示的自定义复选

Question

我需要像这样创建复选框：

我需要在复选框中使用此复选标记：http://i.stack.imgur.com/UfplA.png

我试过的是：

<style>
        .myCheckbox input {
            display: none;
        }

        .myCheckbox span {
            width: 20px;
            height: 20px;
            display: block;
            background: gray;
        }

        .myCheckbox input:checked + span {
            background: url("http://i.stack.imgur.com/UfplA.png");
        }
    </style>

 <input id="Text1" type="text" style="width:150px" tabindex="0" />
    <input id="Text1" type="text" style="width:150px" tabindex="1" />
    <input id="Text1" type="text" style="width:150px" tabindex="2" />
    <label class="myCheckbox">
        <input type="checkbox" name="test" tabindex="3" />
        <span></span>
    </label>
    <input id="Button1" type="button" value="button" style="width:150px" tabindex="4" />

但是当我们按下标签时它没有突出显示，当我检查背景灰色丢失时，

提前感谢您的帮助。

这是我的代码：http://jsfiddle.net/KM6w7/

Answer 1

要设置自定义复选框的样式（实际上是label），您必须使标签可聚焦。除了将contenteditable属性设置为true并将font-size设置为0以隐藏插入符号之外，我不会想到任何其他方式。但是我们需要脚本来阻止用户输入字符（尤其是 backspace 键）。当用户按下 Enter 或 Space 时，该脚本还需要切换（只需触发click）复选框（这是复选框的正常行为）处于焦点状态）。以下是代码详细信息：

$('.myCheckbox').keydown(function(e){      
   //check if the pressed key is Enter or Spacebar
   //then trigger the click() on the inner span to toggle the checkbox
   if(e.keyCode == 13 || e.keyCode == 32){
     $('span', this).click();        
   }
   //check if the pressed key is not TAB, then cancel the keydown
   //We won't cancel the TAB because it helps switch 
   //the focus to the next element.
   if(e.keyCode != 9) return false;
});

Demo.

注意：现在您的label可以调焦，因此您可以使用:focus设置内部范围的样式，如下所示：

.myCheckbox:focus > span {
   ...
}

我还添加了焦点状态的自定义样式，但我注释掉了所有样式，因为您可以使用默认的 大纲 样式。

更新：因为我们总是必须使用脚本，所以我认为你可以用label替换button（默认情况下支持可聚焦性），所以脚本将更短/更简洁。代码详情：

<强> HTML ：

<button class="myCheckbox" tabindex='4'>
  <input type="checkbox" name="test"/>
  <span></span>
</button>    

<强> CSS ：

.myCheckbox {
  width:20px;
  height:20px;
  padding:0;
}
.myCheckbox:focus {
  border:1px solid orange;
}

<强> JS ：

$('.myCheckbox').click(function(){
  $('input',this).click();
});    

Demo 2.

Answer 2

选中复选框时灰色背景丢失的原因是您用于绿色检查的图像具有白色背景。

要突出显示，请查看：Highlight label if checkbox is checked

突出显示复选框边框：

    input[type=checkbox]
    {outline: 2px solid #c00;}
    input[type=checkbox] { background:transparent;border:0; margin-top: 2px;}

检查一下：JsFiddle

Answer 3

添加（！重要）使其对我有用

HTML：-

     <input type="checkbox"  id="StemClipped" name="StemClipped" tabindex="339" value="true" @(Model.StemClipped ? "checked=\"checked\"" : "")

Css：-

     input[type="checkbox"]:focus{ 
     outline: 2px solid #000 !important
     }