CSS3 中的占位符（输入）onclick 效果

Question

我设计了这样的占位符样式：

点击后显示如下：

但我想要这样：

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

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

<input id="input-id">

Answer 1

尝试在 focus 上发布 outline: none; :

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

<input type="text" />

有关 :focus 选择器和 outline 属性的更多信息，请参阅以下文档：:focus selector and outline property.

Answer 2

您可以使用

删除它

#input_id:focus {
  outline: none;
}

placeholder(input) onclick effect in CSS3