I'm working on a project where you can insert your working hours, in which you have to insert start- & end times. But after you put in the start time and tab to go on, it does focus first on the icon, which comes from the

<input type="time">

I want that the tabbing only hits the input area, not the icon next to it.

This is the current state:

example input field:

                       <div >

                            <label for="startTime"
                            >@((MarkupString)loc["StartTime"].ToString())</label>

                            <div >
                                <div >
                                    <div  tabIndex="-2">@Icons.Startzeit</div>
                                </div>

                                <input 
                               type="time"
                               id="startTime"
                               @ref="startTimeElement"
                               @bind-value="blazorStartTime"
                               @onblur="HandleStartTimeSet">
                            </div>
                        </div>

I already tried everything with tabindex:"-1", it just makes no difference. Also I'm just able to modify this icon due css, which goes like:

input[type="text"], input[type="date"], input[type="number"], input[type="search"], input[type="time"], input[type="datetime"], input[type="password"], [type="email"], select, textarea {
    padding: 8px 12px;
    height: 38px;
    width: 100%;
}

I do not have any more ideas or approaches...

CodePudding user response：

After some googling I found, it is a known issue with Edge... see this answer, it states that Microsoft do not plan to fix it; but the link they mention is dead.

I can only replicate this bug on Edge. And it seems MS won't solve it...

You can target it with CSS: idea from here

input[type="time"]::-webkit-calendar-picker-indicator` {
  display: none:
}

Perhaps setting display: none will be enough and maybe adjusting padding/margin for it too?

Unfortunately, there is currently no stable CSS way to change the tab-index; and currently no way to change the HTML attributes.

• The current CSS equivalent for tab-index is -moz-user-focus but this is non-standard and the documentation stresses that you "should not use this".
• Similar things exist for grabbing the pseudo element with JavaScript like this question, but again this is for computedStyles which is back to the CSS issue again.

Maybe in future this sort of feature will be introduced and there will be a working answer for it....