【问题标题】:Bootstrap current active dom element color switch?Bootstrap当前活动的dom元素颜色切换?
【发布时间】:2019-01-09 22:45:41
【问题描述】:

我想为任何 dom 元素更改引导程序的默认轮廓发光。我已经为输入和按钮做了它,但在任何其他元素上它仍然是蓝色的。例如,我在键盘上按 TAB 键,它会转到下一个元素,它会发出蓝色光。我该如何改变呢?我在css中找不到它。请看下面的菜单项:

当我在键盘上按 TAB 时,它每次都会移动到下一个并使其发出蓝色光。我如何改变这种颜色?我认为有一种更简单的方法来修改引导 css,要么覆盖它,要么在本地托管它并修改它,而不必在每个类之后指定活动、焦点或任何导致它以蓝色发光的东西。有什么想法吗??

【问题讨论】:

    标签: css twitter-bootstrap highlight outline


    【解决方案1】:

    您提到的轮廓发光在 CSS 中称为outline

    您必须更改 css 中的 :focus 伪属性才能在按 TAB 键时获得所需的颜色。

    *:focus{
        outline: red; /* Your color */
      }
    

    【讨论】:

    • 这完全删除了它,我认为它更好地使用黑色、白色和紫色。但是对于使用键盘导航的用户来说,以某种方式知道哪个是活动的 dom 元素会更好。发光是个好主意。只是颜色与主题不符。我需要知道这一点,因为它对于反色光版本必须有所不同。感谢您的意见!
    • 请在您的问题中添加一些代码,或者把它放在一个小提琴中?
    • 我最终使用了 *:focus。答案就在我的问题中,真的。为 :focus 全选并设置规则。谢谢!!
    【解决方案2】:

    *:focus 就是你要找的东西:

    *:focus {
        box-shadow: 0 0 0 .2rem red !important;
    }
    

    您可以像我一样使用!important; 覆盖它。

    【讨论】:

    • 这不会改变颜色。谢谢!
    • 我的错。将其与.btn 一起使用只会更改按钮上的焦点颜色。你必须选择你的导航项目。 :)
    • 看看我更新的答案。如果你又卡住了,让我们看看一些代码。
    • 谢谢我使用 /* 删除引导程序轮廓或更改颜色 */ *:focus{ border-color: rgba(121, 62, 165, 1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(121, 62, 165, 1);大纲:0 无!重要;因为这样的样式用于我的选择选项、输入等。现在一切都完美匹配!谢谢大家!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-06-04
    • 2014-11-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-01-31
    • 2017-10-12
    相关资源
    最近更新 更多