求助：移除文本框黑色边框，outline:none属性不生效

你看到的黑色边框是input元素自带的默认border样式，不是outline或者box-shadow，所以之前的样式设置没生效。只需要给.text类加上border: none就能彻底移除：

修改后的核心CSS代码：

.text {
    outline:none !important;
    box-shadow: none;
    border: none; /* 新增这行，移除默认边框 */
    background: transparent; /* 可选：让input背景和外层容器一致，视觉更统一 */
}

另外提个小细节：你HTML里的meta标签name="viewpoint"拼写错误，应该是name="viewport"，虽然不影响边框显示，但修正后能保证移动端适配正常。

完整修改后的代码参考 #

HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>TrialV3</title>
    <link href="Style.css" rel="stylesheet" type="text/css">
</head>
<body>
        <div class="nameone">
            <input class="text" type="text" onkeypress="this.style.width = ((this.value.length + 1)*8 ) + 'px';">
        </div>
</body>
</html>

CSS代码

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.nameone {
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
  position: relative;
  padding: 20px;
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 5%;
}

.nameone::after {
  content: "";
  position: absolute;
  border: 2px solid black;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  top: 19px;
  right: -13px;
  background: black;
  z-index: 1;
}

.nameone::before {
  content: "+";
  position: absolute;
  width: 30px;
  height: 30px;
  top: 11px;
  right: -21.5px;
  color: orange;
  font-size: 35px;
  font-weight: bold;
  z-index: 2;
}

.text {
    outline:none !important;
    box-shadow: none;
    border: none;
    background: transparent;
}

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