在一个特定输入上删除其轮廓并仅保留边框答案

【问题标题】：Remove on one specific input its outline and keep only the border在一个特定输入上删除其轮廓并仅保留边框
【发布时间】：2020-07-19 13:40:35
【问题描述】：

我尝试使用“outline: 0”，但这并没有改变任何事情。

#input_field {
  outline: 0;
  width: fit-content;
  margin: auto;
  margin-top: 20%;
  border-radius: 30px;
  border: 2px solid turquoise;
  padding: 6px;
}

<div id="input_field">
  <input type="text" name="q" size="50">
</div>

我仍然需要其他输入的大纲。

更新：

.lucky_pos, .button_search_pos{    
    text-align: center;
    padding:1px;
    margin: 0;
    flex-direction: row;
}

因为我不想更新其他人，所以这里有一个关于其他人的 .css。大纲应仅应用于#input_field。提前谢谢！

【问题讨论】：

我用了 input.input_field:focus{ outline-width: 0; } 之前，但这也没有用
#input_field input{ outline: 0; }
刚刚试过了。没用
所以你需要圆形边框而不是里面的边框？
是的@Manjuboyz，我在这里也试过代码codepen.io/pen。还是不行。

标签： html css outline

【解决方案1】：

你可以这样做：

fiddle 玩游戏。

#input_field {
  width: fit-content;
  margin: auto;
  margin-top: 20%;
  border-radius: 30px;
  border: 2px solid turquoise;
  padding: 6px;
}

.OutlineNotNeeded {
  border: none;
}

.OutlineNotNeeded:focus {
  outline: 0;
}

<div id="input_field">
  <input type="text" class="OutlineNotNeeded" name="q" size="50">
</div>

【讨论】：

我需要其他输入的轮廓。想法如何指定你的代码？
您的意思是您不想使用* 意味着您还有其他需要大纲的input 类型？然后添加类，我会更新我的代码。
当然。我不想将此非大纲应用于 .lucky_pos, .button_search_pos >>> .lucky_pos, .button_search_pos{ text-align: center;填充：1px；边距：0；弹性方向：行； }
是的，明白了！意味着您已经知道我假设，您可以将上述代码用于特定类，这样它就不会影响其他selectors。 PS：我已经更新了代码。

【解决方案2】：

你需要删除input焦点上的轮廓。

#input_field > input:focus {
   outline:none;
}

要删除边框（这可能会欺骗您，因为它看起来与轮廓相同，并且即使在焦点上也始终保持在那里，除非您将其删除），您可以添加：

#input_field > input {
   border:none;
}

如果您只在对焦时尝试看到边框，您可以去：

#input_field > input {
   border:none;
}

#input_field > input:focus {
   border:1px solid #000;
}

【讨论】：

【解决方案3】：

您只需要为输入标记放置一个不同的类或 id 即可使大纲成为焦点/非焦点。焦点状态是点击输入时的动作。

input.showoutline:focus{
 outline: color type size;
} 

input.hideoutline:focus{
 outline: 0;
} 

<input class="showoutline"/> 
<input class="hideoutline"/>

【讨论】：