爲什麼Materialise CSS表單不包含在框中？

Question

如何在實現CSS的Bootstrap 4 http://v4-alpha.getbootstrap.com/components/forms/中創建一個表單。以下僅顯示輸入字段的下劃線，而不是包含框？

<input placeholder="Placeholder" id="first_name" type="text" class="validate"> 
     <label for="first_name">First Name</label> 
    </div> 

Answer 1

您可以使用「！important」重寫Materialise CSS樣式。
我做了一個CodePen來演示相同的使用給定的標記。 （https://codepen.io/anon/pen/yzVXWN）
另請注意，我在CodePen中包含了Materialise CSS樣式表來測試它。
您可以在開放<style>標籤 之間閉頭內這樣複製並粘貼CSS：

<style> 
#first_name{ 
    display: block!important; 
    width: auto !important; 
    padding: .5rem!important; 
    border: 1px solid rgb(0,0,0); 
    transition: all 1s; 
    border-radius: .25rem!important; 
    box-shadow: none; 
} 

#first_name:focus{ 
    border-color: blue!important; 
} 
label{ 
    color:#9e9e9e!important; 
} 
</style> 

希望幫助:)