Materialize Design

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>