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

Last Reply 10 months ago By dharmendr

Posted 10 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 10 months ago
Hi @kavithav,
Please try the following

Make DIV position fixed when scroll using CSS

It might help you.

Cheers Andrea.

Posted 10 months ago

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


Posted 10 months ago

Please share the Toggle function and the complete html.


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