Question

我正在使用Chrome。我正在使用Materialise CSS（在Angular应用程序中）。我无法移除焦点上我的数字输入周围的蓝色边框。我尝试了下面的许多变体，以及我在重复时遗漏的一些变体。

<div class="input-field">
  <label class="" for="customTarget">Desired value:</label>
  <input id="customTarget" type="number" class="validate" step="any" min="0">
</div>

input:focus, input {
  outline: none;
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
  border: solid 2px transparent;
}

拜托，我错过了什么？

Answer 1

在有角度的一侧做。

（html）

<input style="border: transparent" type="text" aria-label="M.I." class="form-control">

Answer 2

您需要做的就是在要在css代码中更改的属性后添加！important。

input:focus {
  outline: none !important;
  outline-style: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>

<input type="number" />

Answer 3

有点瞧不起使用!important，但它快速而肮脏，完成工作。

你的风格在级联风格中变得越来越苛刻，你可以尝试使用input:focus更加明确body .content input:focus - 这样你就可以避免使用!important，并且通过更明确地，此样式将覆盖内置的Materialize样式。

无法删除输入元素的边框

3 个答案: