custom checkbox with tabing highlight

Question

i need to creat checkbox like this :

i need to use this check mark in checkbox : https://i.stack.imgur.com/UfplA.png

enter image description here

what i tried is here :

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

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

        .myCheckbox input:checked + span {
            background: url("https://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" />

but it is not highlighting when we press the tab, and when i check the background gray is lost,

thanks for help in advance.

here is my code : http://jsfiddle.net/KM6w7/

You should use a transparent png – brrystrw Apr 28 '14 at 16:58 — brrystrw, Apr 28 '14 at 16:58

King King · Accepted Answer · 2014-04-28T19:44:02.827

To style your custom checkbox (which is actually a label), you have to make the label focusable. I don't think of any other way than setting the contenteditable attribute to true and setting the font-size to 0 to hide the caret. However we need script to prevent user from being able to type characters (especially the backspace key). The script is also needed to toggle (simply by triggering the click) the checkbox when user presses the Enter or Space (this is the normally behavior of checkbox when being in focus state). Here are the code details:

$('.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.

NOTE: Now your label can be focusable, so you can use the :focus to style the inner span like this:

.myCheckbox:focus > span {
   ...
}

I also added the custom style for focus state, however I commented out all because you can use the default outline style.

UPDATE: Because we always have to use script, so I think you can replace the label with a button (which supports focusability by default), so the script will be much shorter/more concise. Code details:

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.

score 0 · Answer 2 · edited May 23 '17 at 12:25

0

The reason the gray background is lost when you check the checkbox is that the image you are using for green check have white background.

For highlighting check this: Highlight label if checkbox is checked

For highlighting checkbox border:

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

check this: JsFiddle

edited May 23 '17 at 12:25

Community

1
1

answered Apr 28 '14 at 16:58

Osama Yawar Khawaja

309
4
14

i wan to highlight checkbox border if we do the tab – vir Apr 28 '14 at 17:01

score 0 · Answer 3 · answered Dec 08 '20 at 12:44

Adding (!important) made it work for me

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
     }

custom checkbox with tabing highlight

3 Answers3

Demo.

Demo 2.