删除一个特定输入的轮廓并仅保留边框

Question

我尝试使用“大纲：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。提前致谢！

Answer 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>

Answer 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;
}

Answer 3

您只需为输入标签放置一个不同的 class 或 id 即可使大纲成为 focus/not 焦点。焦点状态是单击输入时采取的操作。

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

input.hideoutline:focus{
 outline: 0;
} 

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

删除一个特定输入的轮廓并仅保留边框

Remove on one specific input its outline and keep only the border

html

css

outline