如何移除输入框(input)获取焦点时的边框

你遇到的是浏览器默认的焦点轮廓（outline）残留问题，虽然你已经设置了outline: none;，但由于CSS优先级规则，或者未明确针对:focus状态设置样式，导致聚焦时的边框依然显示。

核心解决方案 #

给你的.text类补充:focus伪类样式，确保聚焦状态下强制移除轮廓：

.text:focus {
  outline: none;
}

修改后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <style>
      .twitter-dp {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 25px;
        vertical-align: middle;
        margin-right: 5px;
      }

      .text {
        font-size: 17px;
        border: none;
        width: 300px;
        vertical-align: middle;
      }

      /* 新增聚焦状态样式 */
      .text:focus {
        outline: none;
      }

      .tweet {
        vertical-align: middle;
        background-color: rgb(74, 171, 240);
        border-style: none;
        font-family: Arial; /* 修正原代码错误：font-style改为font-family */
        font-size: 17px;
        color: white;
        padding: 5px 15px;
        border-radius: 25px;
        cursor: pointer;
      }

      .tweet:hover {
        opacity: 0.8;
      }

      input {
        border: none;
        background-color: transparent;
        resize: none;
        outline: none;
      }
    </style>
  </head>
  <body>
    <img class="twitter-dp" src="practiceimage.jpg" />
    <input class="text" type="text" placeholder="What's happening?" />
    <button class="tweet">Tweet</button>
  </body>
</html>

额外说明：原代码里的font-style: arial;是错误写法，已修正为font-family: Arial;，这是设置字体的正确属性。

内容的提问来源于stack exchange，提问作者Irusu