Tab Index on div

by

DIV elements are not compatible with tabindex in HTML4).

(NOTE HTML 5 spec does allow this, however, and it commonly works regardless)

The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.

Essentially anything you would expect to be able to hold focus; form elements, links, etc.

What I think you probably want to do here is use a bit of JS (I would recommend jQuery for something relatively painless) to bind to the focus event on the input element and set border on the parent div.

Stick this at the bottom of your body tag to grab jQuery from the Google CDN:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Then something like this would probably do the trick:

$(function() {
    $('div.radio input').bind({
        focus : function() {
            $(this).closest('div.radio').css('border','1px dotted #000');
        },
        blur : function() {
            $(this).closest('div.radio').css('border','none');
        }
    });
});

More Related Contents:

  1. What does “for” attribute do in HTML tag?
  2. What does “for” attribute do in an HTML tag?
  3. Is there any way to change input type=”date” format?
  4. How can I set max-length in an HTML5 “input type=number” element?
  5. Difference between and
  6. Do checkbox inputs only post data if they’re checked?
  7. Is there a float input type in HTML5?
  8. Styling text input caret
  9. How to create a checkbox with a clickable label?
  10. How do I change the color of radio buttons?
  11. How to set input type date’s default value to today?
  12. HTML Input=”file” Accept Attribute File Type (CSV)
  13. How to detect when cancel is clicked on file input?
  14. Limit number of characters allowed in form input text field
  15. Angular2 – Input Field To Accept Only Numbers
  16. How to get folder directory from HTML input type “file” or any other way?
  17. Is there a way to style part of an input field’s value? [duplicate]
  18. Change cursor type on input type=”file” [duplicate]
  19. Is there any way to prevent input type=”number” getting negative values?
  20. Assign an initial value to radio button as checked
  21. Why cannot change checkbox color whatever I do? [duplicate]
  22. How to select a radio button by default? [duplicate]
  23. Changing the highlight color when selecting text in an HTML text input
  24. Force decimal point instead of comma in HTML5 number input (client-side)
  25. Can you tab through all radio buttons?
  26. How to make a radio button look like a toggle button
  27. How to get rid of x and up/down arrow elements of a input date?
  28. How to get the text from the HTML5 input field error message in Selenium?
  29. Make input element (type=”text”) handle multiple lines of text
  30. HTML5 input box with type=”number” does not accept comma in Chrome browser

Leave a Comment