这是浏览器的默认设置，也是一个辅助功能。请确保您添加了一些视觉上等效的内容，以使用户清楚地了解它。
您可以使用:focus和:focus-within来定位此行为。此"边框"是一个轮廓，因此您可以覆盖它。

.loginbox {
  width: 300px;
  height: 260px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
  box-sizing: border-box;
  padding: 10px;
}

.input-text {
  width: 95%;
  height: 95%;
  border: none;
  font-size: 90%;
  display: block;
}

.input-text:focus {
  outline: none;
}

.input-text::placeholder {
  color: #b7b7b7;
  font-family: SFProDisplay-Regular, Helvetica, Arial, sans-serif;
}

.input-text-border {
  border: 1px solid #afafaf;
  padding: 5px;
  width: 90%;
  height: 10%;
  background-color: #ffffff;
  border-radius: 6px;
}

<div class="loginbox">
  <div class="input-text-border">
    <input type="text" class="input-text" placeholder="Email or phone number">
  </div>
</div>

你可以使用outline来样式化任何输入标签的outline。

input:focus {
  outline: 1px solid tomato;
}

我们需要使用HTML类型来隐藏输入字段。使用此属性，输入字段将不再在页面上可见。通过此标记，我们可以隐藏页面中的输入字段。