HighLight DIV element on TAB Key Press (Focus) using CSS

Last Reply 5 months ago By dharmendr

Posted 5 months ago

Below is my html where i have dropdowns and textboxes along with this in my webpage. The issue is when tabbing from one control to another control all the controls are getting tabbed and highlighted expect the below one.

<div class="cls" id="Col" onclick="Toggle(this);">Highlight me in border</div>
<input type="button" value="Add1" id="btnAdd1" onclick="Add1();" style="width: 120px;" class="newAddNew Tab" />
<input type="button" value="Add2" id="btnAdd2" onclick="Add2();" style="width: 120px;" class="newAddNew Tab" />

Tabbing working for input type of html 

.Tab:focus{
    outline: none;
    box-shadow: 0px 0px 5px 2px #61C5FA !important;
}

 

You are viewing reply posted by: dharmendr 5 months ago.
Posted 5 months ago

Hi kavithav,

In order to highlight the element in div on tab assign tabindex attribute and set to 0.

HTML

<select name="ctl02" class="newAddNew Tab">
    <option value="text1">text1</option>
    <option value="text2">text2</option>
</select>
<br />
<br />
<div id="Col" class="newAddNew Tab" tabindex="0">
    <input name="TextBox1" type="text" id="TextBox1" class="newAddNew Tab" />
    Highlight me in border</div>
<br />
<br />
<input type="button" value="Add1" id="btnAdd1" style="width: 120px;" class="newAddNew Tab" />
<input type="button" value="Add2" id="btnAdd2" style="width: 120px;" class="newAddNew Tab" />
<style type="text/css">
    .Tab:focus
    {
        outline: none;
        box-shadow: 0px 0px 5px 2px #61C5FA !important;
    }
</style>

Demo