Question

我为按钮创建了一个动画，如果该按钮是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

Answer 1

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

但是，在input，img，br等自封闭的元素中，不支持或不存在伪元素。应用于这些自封闭标记的伪元素赢得了＃39 ;在DOM中可见。

根据MDN，

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

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

另外，正如用户@AndreiGheorghiu所提到的那样：

可以从＆＃34; Living Standard＆＃34;关于这个主题，看起来::before和::after用法仅限于可以包含其他类型（HTML）元素节点的元素。这就是为什么<textarea>虽然是配对标记但却不能有::before和::after的原因。它只能包含文本节点。

注意

然而，有时可以使伪元素与img标记一起使用（少数浏览器支持它）。

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

将<{1}}添加到html中的style="background-image: url(image.jpg)"元素。

Answer 2

您的动画依赖于：before元素。这对输入无效，因为它们需要在输入字段中显示容器，而不能使用其他元素。

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

从输入字段中删除样式

2 个答案: