有没有办法用 CSS 在焦点元素周围留出一些空间,以便在它周围查看?
如果不是,什么可以是非侵入式 javascript?
谢谢
(please use keyboard tab)<br>
when tabbing...
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
did you notice me?<br><br>
<span tabindex=1>I want to be a bit far from viewport TOP and BOTTOM borders</span><br><br>
and me?<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<span tabindex=2>I want the same</span><br>
at least to see this!!!<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
编辑:
与建议的类似,这部分解决了问题:
span {
padding-top: 70px; /* guaranties to see the text above */
padding-bottom: 70px; /* guaranties to see the text below */
/* but both produce a big focus rectangle around */
outline-offset: -70px; /* this helps a little on FF */
}
这在 FF 中完美,但在 IE 中不完美:
span {padding-top: 70px; padding-bottom: 70px;}
span:focus {padding-top: 0px; padding-bottom: 0px;}
最佳答案
不能 100% 确定这是否是您要问的,但类似这样的 JsFiddle
您可以使您的元素成为 block 元素(而不是内联 span 元素)并在 :focus
选择器上添加带有 css 的填充
// css
div:focus {padding-left: 10px;}
// html
<div tabindex=1>test</div>
<div tabindex=2>lorem</div>
<div tabindex=2>ipsum/div>
当前获得焦点的 div 将应用上述 CSS 样式。您可以将 div:focus 选择器更改为类,例如:
.my-class:focus {padding-left: 10px;}
然后将该类添加到您的元素中
关于javascript - 制表符时 CSS 周围有一些空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26421056/