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

kavithav

SOLVED CLOSED ACTIVE ANSWERED
User: kavithav
Posted: on Oct 15, 2018 04:57 AM
Forum: HTML and CSS
Replies: 5
Views: 19919

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

Download FREE API for Word, Excel and PDF in ASP.Net

Andrea

0 1

Reply
User: Andrea
Replied: on Oct 15, 2018 04:57 AM
Report

Hi @kavithav, Please try the following Make DIV position fixed when scroll using CSS It might help you. Cheers Andrea.

kavithav

0 2

Reply
User: kavithav
Replied: on Oct 15, 2018 04:59 AM
Report

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

dharmend...

0 3

Reply
User: dharmendr
Replied: on Oct 15, 2018 05:04 AM
Report

Please share the Toggle function and the complete html.

kavithav

0 4

Reply
User: kavithav
Replied: on Oct 15, 2018 05:11 AM
Report

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

dharmend...

0 5

Reply
User: dharmendr
Replied: on Oct 15, 2018 06:18 AM
Report

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

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

Company

Explore

Follow us

Contact Us