Question

我有以下按钮

<?php

$pdo = new PDO('mysql:host=localhost;dbname=jeu', 'root', '', array(
    PDO::ATTR_ERRMODE => PDO::ERRMODE_WARNING,
    PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES cp1256'
));


$uid = isset($_POST['chrono']) ? $_POST['chrono'] : null;

$resultat = $pdo->prepare("INSERT INTO ajaxtest (name) VALUES (:name)");
$resultat->bindParam(':name', $uid, PDO::PARAM_STR);

if ($resultat->execute()) {
    $id_insere = $pdo->lastInsertId();

    echo json_encode("data inserted success");
}

?>

一切都很好，但我注意到默认情况下会概述小bug：

好吧...。CSS使我可以删除带有以下内容的烦人的轮廓：

<td mat-cell *matCellDef="let element">
  <button mat-icon-button type="button" (click)="downloadStuff(element)">
    <mat-icon mat-icon matTooltip="{{element.someId}}">picture_as_pdf</mat-icon>
  </button>
</td>

但是，..我仍然得到了这个令人讨厌的默认背景焦点：

我已经在CSS中尝试了一些与覆盖和背景相关的东西，但这些似乎都没有解决这个问题。如何删除此默认背景？为什么它的默认行为如此？？？

在开发工具中查看所选项目。

Answer 1

在样式CSS中，只需添加以下代码。它将从所有按钮中删除那些烦人的轮廓

button:focus {
    outline: none !important;
}

Answer 2

在我看来，真正的问题是按钮的结构。 Angular Material构建各种子组件，最后一个是具有CSS类mat-button-focus-overlay的'div'：

我的解决方法很简单。在style.css中添加或覆盖mat-button-focus-overlay：

.mat-button-focus-overlay {
    background-color: transparent!important;
}

Answer 3

单击或触摸“材料设计”按钮后，它会一直处于焦点--->要解决此问题，您需要添加以下代码：organizations +----+----------+ | id | name | +----+----------+ | 1 | Org name | +----+----------+ deals +----+------------+-----------------+ | id | name | organization_id | +----+------------+-----------------+ | 1 | First Deal | 1 | +----+------------+-----------------+ subscriptions +----+-----------------+ | id | initial_deal_id | +----+-----------------+ | 1 | 1 | +----+-----------------+

onclick="this.blur()"

或者您的情况下

<button mat-raised-button onclick="this.blur()" (click)="onEdit()">Edit</button>

Answer 4

也尝试一下。

<button mat-icon-button [autofocus]="false" (click)="closeDialog()"> <mat-icon>clear</mat-icon> </button>

只需添加[autofocus]。

Answer 5

我可以通过在其他项目上设置属性 cdk-focus-start 来摆脱默认的焦点按钮。更多信息可用here

Answer 6

使用此命令在 .css 中删除轮廓和自动聚焦：

button {
  outline: none;
}

::ng-deep .mat-button-focus-overlay {
  display: none;
}

Answer 7

问题有点老了。但我为此找到了更好的解决方案。

在按钮标签中添加tabindex="-1"，问题解决！

<button tabindex="-1" mat-icon-button type="button" (click)="downloadStuff(element)">
    <mat-icon mat-icon matTooltip="{{element.someId}}">picture_as_pdf</mat-icon>
</button>

角度材质按钮删除自动对焦

7 个答案: