谷歌MDL的textfield重點改變顏色

我剛開始這個谷歌材料設計精簡版。當你在這個標籤中聚焦時，我發現這個文本框會浮動。顏色是藍色或海軍或idk。谷歌MDL的textfield重點改變顏色

的問題是，我改變了鏈接的顏色變成這種顏色靛藍粉

<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">

但並沒有改變我的文本框到藍靛色或當我專注於它的粉紅色。

問題很簡單，如何改變它？

我做了些什麼，但仍然沒有運氣。

的HTML：

<form action="#"> 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
    <input class="mdl-textfield__input" type="text" id="sample4"> 
    <label class="mdl-textfield__label" for="sample3">Text...</label> 
    </div> 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4"> 
    <label class="mdl-textfield__label mdl-color-modifier" for="sample4">Number...</label> 
    <span class="mdl-textfield__error">Input is not a number!</span> 
    </div> 
</form>

的CSS：

div .mdl-textfield__label:after { 
    background: pink; 
} 
.mdl-textfield--floating-label .is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{ 
    color:pink; 
} 

.mdl-color-modifier:focus{ 
    color:pink; 
}

我試圖在它申請一個新的類僞：焦點，但它仍然沒有運氣了。

來源

2016-12-06 Obink

你意思到其中的底部邊框在焦點切換顏色的？我相信它與javascript有關，因爲在這個時候：focus的Pseudo DOES設置適用於元素，但在其上方，來自中心的動畫仍然會重新標記邊框，甚至會覆蓋！重要屬性 – davidtaubmann

檢查我的例子。應該爲你工作。將#FAFAFA更改爲＃<靛藍的十六進制> –

-1

我相信一個替代的解決方案是這樣的，它的工作對我來說：

.mdl-textfield__input:focus { 
    border-bottom-color: red; 
    box-shadow: 0 1px 0 0 red; 
}

我從here扣除答案。

來源

2017-04-20 07:12:47 davidtaubmann

不起作用。 https://jsfiddle.net/90u6Lxc4/3/ –

@BillyFerguson它的工作，我可以清楚地看到它，也許你不能看到差異，因爲顏色是白色的背景。只需改變顏色。 – davidtaubmann

https://jsfiddle.net/90u6Lxc4/6/我不認爲op想要兩個下劃線 –

我擁有這一切。鍵是:after修飾符和is-focused類。只需將#FAFAFA替換爲你的indigo-pink，它應該適用於你。這只是概念證明。檢查小提琴。它也有文字標籤。

.mdl-textfield.is-focused .mdl-textfield__label { 
    color: #FAFAFA; 
} 

.mdl-textfield__label:after{ 
    background-color: #FAFAFA; 
}

https://jsfiddle.net/90u6Lxc4/30/

來源

2017-08-31 19:38:12

谷歌MDL的textfield重點改變顏色

回答

相關問題