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

Last Reply 8 months ago By dharmendr

Posted 8 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;
}

 

Posted 8 months ago
Hi @kavithav,
Please try the following

Make DIV position fixed when scroll using CSS

It might help you.

Cheers Andrea.

Posted 8 months ago

my question is different and the answer which you are suggesting is different


Posted 8 months ago

Please share the Toggle function and the complete html.


Posted 8 months ago

 Tabbing working for input type of html

<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" />

 

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

 


Posted 8 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