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

Last Reply one year ago By dharmendr

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

Make DIV position fixed when scroll using CSS

It might help you.

Cheers Andrea.

Posted one year ago

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



Posted one year 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 one year 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