将外部溢出的轮廓边框设置为隐藏 [英] styling the outline border with outer overflow set to hidden

问题描述

CSS 样式：

  .outer {
 position：relative; 
宽度：100％; 
 height：200px; 
背景颜色：＃000; 
 overflow：hidden; 
} 
 
 .outer：focus {
 outline：10px solid＃00FF00; 
} 
 
 .inner {
 position：absolute; 
宽度：50％; 
 height：200px; 
背景颜色：＃F0F; 
剩下：50％; 
} 
 
 .inner：focus {
 outline：10px solid＃FFFF00; 
 
  

HTML 代码：

 < div tabindex =0class =outer> 
< div tabindex =0class =inner> 
  

问题：
我想让内部可聚焦带有大纲边框，但是因为 overflow：hidden; 我不能这样做。这只是一个例子。另外，当焦点位于内部分区时，我不想触摸外部分区的 overflow：hidden ，所以这不会发生。也许有一种简单的方法（仅限代码，无imgs-graphics）在可聚焦元素上实现某种边界？

* CSS-HTML code only pls 。 No JS

解决方案

为大纲当div专注时，像这样：



  .inner：focus {
 outline-offset：-10px; 
} 
  

该值应该等于轮廓宽度。

---

作为另一种方法，您也可以使用插入 box-shadow eg

  box-shadow：inset 0 0 0 10px＃ff0; 
  

The CSS style:

.outer {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #000;
  overflow: hidden;
}

.outer:focus {
  outline: 10px solid #00FF00;
}

.inner {
  position: absolute;
  width: 50%;
  height: 200px;
  background-color: #F0F;
  left: 50%;
}

.inner:focus {
  outline: 10px solid #FFFF00;
}

The HTML code:

<div tabindex="0" class="outer">
<div tabindex="0" class="inner">

The problem: I want to make inner div focusable with an outline border, but because of overflow: hidden; I can't do it. This is only an example. Also, I don't wanna touch the overflow: hidden of the outer div when the focus is on the inner one, so this won't go. Perhaps there's an easy way(code only, no imgs-graphics) to implement some sort of border on the focusable element?

*CSS-HTML code only pls. No JS

解决方案

Use a negative offset for the outline when the div is focused, like so:

.inner:focus {
   outline-offset: -10px;
}

The value should be equal to the outline-width.

---

As an alternative approach you might also use an inset box-shadow e.g.

box-shadow: inset 0 0 0 10px #ff0;

这篇关于将外部溢出的轮廓边框设置为隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！