从输入字段中删除样式答案

【问题标题】：Remove Styling from Input Field从输入字段中删除样式
【发布时间】：2017-03-02 00:22:55
【问题描述】：

我为一个按钮创建了一个动画，如果按钮是一个 div 容器，这个动画效果很好。但是，如果我将相同的 CSS 应用于输入字段，动画就会中断。有人能解释一下为什么会这样以及如何解决吗？

这就是我的 CSS 的样子：

.submit__button {  
  font-family: BentonSans;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.78125rem;
  line-height: 60px;
  display: flex;
  border: 2px solid #303333;
  margin: 2rem auto 0;
  transition: 0.5s;
  -webkit-transition:0.5s;
  position: relative;
  vertical-align: middle;
  color: #303333;
  display: inline-block;
  text-align: center;
  transition: 0.5s;
  padding: 0 20px;
  cursor: pointer;
  -webkit-transition:0.5s;
}

.submit__button:hover {
  border: 2px solid rgba(0,0,0,0);
  color: #303333;
}

.submit__button::before, .submit__button::after {
  width: 100%;
  height:100%;
  z-index: 3;
  content:'';
  position: absolute;
  top:0;
  left:0;
  box-sizing: border-box;
  -webkit-transform: scale(0);
  transition: 0.5s;
}


.submit__button::before {
  border-bottom: 2px solid #000;
  border-left: 0;
  -webkit-transform-origin: 0% 100%;
}

.submit__button::after {
  border-top: 0;
  border-right: 0;
  -webkit-transform-origin: 50% 50%;
}

.submit__button:hover::after, .submit__button:hover::before {
  -webkit-transform: scale(1);
}

http://codepen.io/hejsfj/pen/RpramK

【问题讨论】：

悬停效果如何在输入字段上起作用？

标签： css animation

【解决方案1】：

您的动画是使用div 中的伪元素::before 实现的。因此，它的工作非常好。

但是，伪元素在 input、img、br 等自封闭元素中不受支持或不可靠。应用于这些自封闭标签的伪元素在 DOM 中不可见。

根据MDN，

替换元素是其外观和尺寸由外部资源定义的任何元素。示例包括图像（<img> 标签）、插件（<object> 标签）和表单元素（<button>、<textarea>、<input> 和 <select> 标签）。所有其他元素类型都可以称为不可替换元素。

::before 和 ::after 仅适用于非替换元素。

另外，正如用户@AndreiGheorghiu 所说：

从主题上的“Living Standard”可以看出，::before 和 ::after 的使用仅限于可以包含其他类型节点 (HTML) 元素的元素。这就是为什么<textarea> 虽然是一对标签，但不能有::before 和::after。它只能包含文本节点。

注意

然而，有时可以使伪元素与img 标签一起使用（一些浏览器确实支持它）。

img {
  display: block; 
  content: ""; 
  height: 50px /* height of image in px */
}

将：style="background-image: url(image.jpg)" 添加到 html 中的 img 元素中。

【讨论】：

我认为您的回答具有误导性，关于以下措辞：“因此，使用 ::before 或 ::after 替换元素会产生不可靠的结果。”。根据当前HTML 标准，单个标签不会渲染任何包含的元素，因为它们不能包含任何元素。因此，产生的结果非常可靠。
@AndreiGheorghiu 我重新构建了我的答案，以防出现混淆。在某些情况下，您可以让单个标签表现得好像它们支持伪元素一样。
您能提供一个这样的例子吗？谢谢。
检查答案中的 NOTE 部分并尝试一下。据我所知，一些早期版本的 Firefox 确实支持它。
从我对这个主题的"Living Standard" 的了解来看，::before 和::after 的使用仅限于可以包含其他类型节点的元素 (HTML) Element .这就是为什么<textarea>虽然是一对标签，但不能有::before和::after：它只能包含文本节点。我认为这是问题的正确答案。我会删除我的，当/如果你有时间，请考虑在你的答案中包括这个。谢谢。

【解决方案2】：

您的动画依赖于 :before 元素。这不适用于输入，因为它们需要在输入字段中显示容器，并且您不能使用其他元素。

此问题可能重复： Can I use the :after pseudo-element on an input field?

【讨论】：