マテリアライズデザイン

Question

マテリアライズフォーム入力フィールドデザインのビューを変更することはできますか？

マテリアライズ入力フィールドを、画像に記載されているブートストラップフィールドに変更したいとします。 これは実際に私が望むイメージです。 Image

<div class="input-field col s2"> 
    <input style="font-weight: bold;" id="yearfrom" name="yearfrom" 
      value="${parts.yearfrom}" type="text"> 
    <label for="yearfrom"><strong>YearFrom</strong></label> 
</div> 

Answer 1

あなたは、入力フィールドのスタイルを持っているSASSファイルを上書きする必要があります。あなたのデザインに合わせて始めるのが良い場所は、入力欄の周りに境界線を追加することです。

Answer 2

.bootstrap { 
 
    margin-bottom: 15px; 
 
} 
 
.bootstrap .form-control:focus { 
 
    border-color: #66afe9 !important; 
 
    outline: 0; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); 
 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); 
 
} 
 
.bootstrap .form-control { 
 
    display: block; 
 
    width: 100%; 
 
    height: 20px; 
 
    padding: 6px 12px; 
 
    font-size: 14px; 
 
    line-height: 1.42857143; 
 
    color: #555 !important; 
 
    background-color: #fff; 
 
    background-image: none; 
 
    border: 1px solid #ccc !important; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important; 
 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
 
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s !important; 
 
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s !important; 
 
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s !important; 
 
} 
 
.bootstrap label { 
 
    display: inline-block; 
 
    max-width: 100%; 
 
    margin-bottom: 5px; 
 
    font-weight: 700; 
 
    color: #000 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/> 
 
Materialize<br><br> 
 
<div class="row"> 
 
    <div class="input-field col s12"> 
 
     <input id="first_name1" type="text" class="validate"> 
 
     <label for="first_name1">First Name</label> 
 
    </div> 
 
    </div> 
 
    
 
    
 
    Bootstrap<br><br> 
 
    
 
    <div class="row"> 
 
    <div class="col s12 bootstrap"> 
 
     <label for="first_name2">First Name</label> 
 
     <input class="form-control" id="first_name2" type="text" class="validate"> 
 
    </div> 
 
    </div>