CSS3中的占位符（输入）点击效果答案

【问题标题】：placeholder(input) onclick effect in CSS3CSS3中的占位符（输入）点击效果
【发布时间】：2021-10-28 02:02:15
【问题描述】：

我设计了一个这样的占位符：

点击后显示如下：

但我想要这样：

#input-id {
  border: none;
  border-bottom: 2px black solid;
}

#input-id:checked {
  border: none;
  border-bottom: 2px black solid;
}

&lt;input id="input-id"&gt;

【问题讨论】：

【解决方案1】：

尝试在focus 上发送outline: none;：

input {  
  border:none;
  border-bottom: 2px black solid;
}
input:focus{
    border:none;
    border-bottom: 2px black solid;
    outline: none;
}

&lt;input type="text" /&gt;

有关:focus 选择器和outline 属性的详细信息，请参阅以下文档：:focus selector 和outline property。

【讨论】：

【解决方案2】：

您可以使用删除它

#input_id:focus {
  outline: none;
}

【讨论】：