Home/ Questions/Q 878073
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T11:42:54+00:00

I have an html page where I cannot put a DOCTYPE (I am not

  • 0

I have an html page where I cannot put a DOCTYPE (I am not allowed to). Plus, I need to make it work on IE 8!
Then there is a checkbox + label thing.
For example, this:

    <input id="daffodils" type="checkbox" title="daffodil factsheet" name="daffodils" value="checkbox" tabindex=2>
    <label for="daffodils">Daffodils</label>
    <input id="tulips" type="checkbox" title="tulip factsheet" name="tulips" value="checkbox" tabindex=3>
    <label for="tulips">Tulips</label>

My problem:
I want to get the checkbox highlighted when I Tab around, but with this code, only the Labels get highlighted. I tried using TabIndex. but it didn’t help.
Of course, the checkbox can be checked/unchecked, but I wanted the checkbox to be highlighted. (By highlighted – I mean ..the dotted square around an object)

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is not pretty, but it might work for you:

    <html>
  <head>
    <title>Whatever</title>

    <script type="text/javascript">
      function focusThis(This) {
        This.className='focus';
      }

      function blurThis(This) {
        This.className='blur';
      }
    </script>

    <style type="text/css">
      .focus {
        border: 1px dotted black;
      }

      .blur {
        border: 1px solid white;
      }
    </style>
  </head>
  <body>
    <input id="daffodils" onfocus="focusThis(this);" onblur="blurThis(this);" type="checkbox" title="daffodil factsheet" name="daffodils" value="checkbox" tabindex=2>
    <label for="daffodils">Daffodils</label>
    <input id="tulips" onfocus="focusThis(this);" onblur="blurThis(this);" type="checkbox" title="tulip factsheet" name="tulips" value="checkbox" tabindex=3>
    <label for="tulips">Tulips</label>
  </body>
</html>

    Notice the onfocus and onblur events on the input boxes.

    Edit:

    If you’re open to using the jQuery library, you can easily get away from the onfocus and onblur events inside the input tags by just adding and removing the focus class:

    <html>
  <head>
    <title>Whatever</title>

    <script type="text/javascript" src="jquery.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function(){
        $('input').focus(function(){
          $(this).addClass('focus');
        }).blur(function(){
          $(this).removeClass('focus');
        });
      });
    </script>

    <style type="text/css">
      .focus {
        border: 1px dotted black;
      }
    </style>
  </head>
  <body>
    <input id="daffodils" type="checkbox" title="daffodil factsheet" name="daffodils" value="checkbox" tabindex=2>
    <label for="daffodils">Daffodils</label>
    <input id="tulips" type="checkbox" title="tulip factsheet" name="tulips" value="checkbox" tabindex=3>
    <label for="tulips">Tulips</label>
  </body>
</html>

    I’m sure someone could write the JS code to do the same, but I prefer jQuery.

    • 0