сделать фокусированную кнопку похожей на нефокусированную кнопку

Question

Внутри определенного div я хочу, чтобы сфокусированные кнопки выглядели точно так же, как не сфокусированные кнопки.

Есть ли способ выразить это в sass / scss?

Что-то похожеена это:

.myDiv {

 > button {

    &:focus {
      @extend &:not(&:focus)
    }
  }
}

---

Кроме того, можно ли отключить все правила, которые применяются только из-за определения псевдокласса :focus?

Answer 1

Вы можете просто перезаписать стиль по умолчанию, выполнив следующеепрочитайте эту статью из проекта a11y - что объясняет, почему с точки зрения доступности нехорошо использовать элементы :focus 'с точки зрения доступности.

Answer 2

Вы можете использовать селектор-заполнитель .Что-то вроде этого:

%button {
    color: red;
}

button {
    @extend %button;

    &:focus {
        color: green;
    }
}

.myDiv {
    > button:focus {
        // Extend from %button again, thus overriding through specificity.
        @extend %button;
    }
}

Answer 3

Здесь я объясняю просто. Пожалуйста, смотрите код ниже.

HTML:

<div class="mydiv">
  <button>My Button</button>
</div>

SCSS:

* {
  outline: none;
}
.mydiv {
  button {
    border: 1px solid #000;

    &:focus {
      border:1px solid #ccc;
    }
  }
}