我想知道是否有 tabindex 的 CSS 替代方案。
<button tabindex="1">ONE</button>
<button tabindex="3">TWO</button>
<button tabindex="2">THREE</button>
备选方案nav-index
早就放弃了。
The following features are at-risk, and may be dropped during the CR period:
Directional focus navigation: the nav-up, nav-right, nav-down, nav-left properties.
最佳答案
页面上元素的顺序是确定选项卡索引顺序的唯一其他方式。这是我多年前曾经做的事情,当时我不得不支持一个网站的非 JavaScript 版本。你可以用 css 做的是在视觉上重新定位元素,现在你有使用 flex 和 order 的优势。
<style type="text/css">
.myFlexWrapper{
display:flex;
/* I advise using sass and autoprefixer to poly fill all the other browsers*/
}
.myFlexWrapper button:nth-child(1){
order:30; /* will display this button visually last but retain the tabindex as 1 because it's the first item.*/
}
.myFlexWrapper button:nth-child(2){
order:10;/* will display this button visually first but retain the tabindex as 2 because it's the second item.*/
}
.myFlexWrapper button:nth-child(3){
order:20;/* will display this button visually second but retain the tabindex as 3 because it's the third item.*/
}
</style>
<div class="myFlexWrapper">
<button>ONE</button>
<button>TWO</button>
<button>THREE</button>
</div>
关于html - tabindex 的 CSS 替代方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43862102/