html - 如何使用CSS为输入边框底部着色

Question

当输入不是焦点时，我需要为输入边框底部着色。这是我的 html 代码:

<input type="number" id="nc" name="days" class="numero" placeholder="" min="0"><br />

这是我的CSS代码:

.numero {
    border-bottom-color: red;
}

但它不起作用。谁能帮忙？

Answer 1

在你的例子中边框是红色的:

.numero {
  border-bottom: 1px solid #F00;
}

<input type="number" id="nc" name="days" class="numero" placeholder="" min="0"><br />

只需使用简写来添加样式、尺寸和颜色即可。

现在，为了在聚焦时移除它:

.numero:not(:focus) {
  border-bottom: 1px solid #F00;
}

<input type="number" id="nc" name="days" class="numero" placeholder="" min="0"><br />

我们将 :not() 功能与 :focus 一起使用，以检查有问题的元素是否未获得焦点。