从输入字段中删除样式

-2

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

来源

2017-03-01 Sebastian Frederik Jacobsen

如何能在输入栏上悬停效果的工作？ –

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

然而，伪构件不支持或不可靠的在是自封闭状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元素。

来源

2017-03-01 14:47:33 nashcheez

我相信你的回答是误导性的，关于这个措辞：*“因此，使用:: before或:: after替换元素将产生**不可靠的结果。”***。根据目前的HTML标准，单个标签***不会呈现任何包含的元素，因为它们不能包含任何元素。因此，生成的结果非常可靠。 –

@AndreiGheorghiu为了避免混淆，我重提了我的答案。并且有些情况下，您可以使单个标签像支持伪元素一样工作。 – nashcheez

您能否提供一个这种情况的例子？谢谢。 –

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

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

来源

2017-03-01 14:49:24

从输入字段中删除样式

回答

相关问题