從輸入字段中刪除樣式

-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

從輸入字段中刪除樣式

回答

相關問題