입력 파일 필드 텍스트 스타일이 적용되지 않습니다.

Question

파일 입력 텍스트 요소의 스타일을 지정하려고합니다. 은 다음과 같아야합니다

을 모양 아래의 코드는 다음과 같다으로하지만 현재 :

내가 텍스트 자체의 스타일을 수있는 방법을 아무 생각이 버튼 만이 덧붙여서 ..

나는 또한 문제를 설명하는 데 어려움을 겪고있다.

미리 감사드립니다.

.marketing__block { 
 
    padding-bottom: 44px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.marketing__block h4 { 
 
    text-transform: uppercase; 
 
} 
 

 
h4 { 
 
    font-size: 14px; 
 
    line-height: 14px; 
 
    font-weight: normal; 
 
    font-family: 'BrandonTextBlack'; 
 
    margin: 0 0 15px 0; 
 
} 
 

 
fieldset { 
 
    min-width: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
} 
 

 
.marketing__row { 
 
    margin-bottom: 8px; 
 
    width: 100%; 
 
} 
 

 
input[type="text"], 
 
input[type="email"], 
 
input[type="tel"], 
 
input[type="file"] { 
 
    border: 0; 
 
    background: #f7f7f7; 
 
    width: 100%; 
 
    height: 44px; 
 
    padding: 0 30px; 
 
    font-size: 15px; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 
input[type="file"] { 
 
    padding: 15px; 
 
} 
 

 
input, 
 
select, 
 
textarea { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 12px; 
 
    color: #595959; 
 
} 
 

 
textarea { 
 
    border: 0; 
 
    background: #f7f7f7; 
 
    width: 100%; 
 
    height: 155px; 
 
    padding: 15px 30px; 
 
    font-size: 15px; 
 
    resize: none; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 
.button { 
 
    display: inline-block; 
 
    border: 3px solid #efc506; 
 
    color: #efc506; 
 
    font-size: 18px; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-family: 'BrandonTextBlack'; 
 
    padding: 12px 36px; 
 
    background: none; 
 
    transition: all 0.2s; 
 
    position: relative; 
 
}

<div class="marketing__block"> 
 
    <h4>Solliciteer online</h4> 
 

 
    <form name="job_form" method="post" action="" enctype="multipart/form-data" class="ng-pristine ng-valid"> 
 
    <fieldset> 
 
     <div class="marketing__row"> 
 
     <input type="text" id="job_form_firstName" name="job_form[firstName]" required="required" placeholder="Voornaam *"> 
 
     </div> 
 

 
     <div class="marketing__row"> 
 
     <input type="text" id="job_form_name" name="job_form[name]" required="required" placeholder="Naam *"> 
 
     </div> 
 

 
     <div class="marketing__row"> 
 
     <input type="email" id="job_form_email" name="job_form[email]" required="required" placeholder="Email *"> 
 
     </div> 
 

 
     <div class="marketing__row"> 
 
     <input type="text" id="job_form_tel" name="job_form[tel]" placeholder="Telefoon Nr."> 
 
     </div> 
 

 
     <div class="marketing__row"> 
 
     <input type="text" id="job_form_url" name="job_form[url]" placeholder="Url"> 
 
     </div> 
 

 

 
     <div class="marketing__row"> 
 
     <input type="file" id="job_form_attachment" name="job_form[attachment]" placeholder="form.label.attachment"> 
 
     </div> 
 

 

 
     <div class="marketing__row"> 
 
     <textarea id="job_form_message" name="job_form[message]" placeholder="Bericht"></textarea> 
 
     </div> 
 

 

 

 

 
     <div><button type="submit" id="job_form_submit" name="job_form[submit]" class="button">Verstuur</button></div> 
 
    </fieldset> 
 
    <input type="hidden" id="job_form_type" name="job_form[type]" value="form_job_application"><input type="hidden" id="job_form__token" name="job_form[_token]" value=""> 
 
    </form> 
 
</div>

Answer 1

입력 파일은 다른 입력 유형 다르다. CSS에서 직접 변경할 수는 없습니다. 당신이해야 할 일은 그것입니다.

<div> 
    <element you will style> 
    <label for="file-input">a label</label> 
    <input type="file" id="file-input"> 
</div> 

div 사이에 줄이십시오. 그런 다음 입력 및 레이블 불투명도를 0으로 변경하고 절대 값을 모두 왼쪽, 맨 위 등 = 0으로 만듭니다. 이는 입력 및 레이블을 보이지 않게하여 사용자가 실제로 표시된 텍스트를 클릭한다고 생각하도록합니다. 입력 레이블 또는 버튼을 클릭합니다.

Answer 2

디자인에 맞게 파일 입력 및 레이블 스타일을 숨길 수 있습니다.

.marketing__block { 
 
    padding-bottom: 44px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.marketing__block h4 { 
 
    text-transform: uppercase; 
 
} 
 

 
h4 { 
 
    font-size: 14px; 
 
    line-height: 14px; 
 
    font-weight: normal; 
 
    font-family: 'BrandonTextBlack'; 
 
    margin: 0 0 15px 0; 
 
} 
 

 
fieldset { 
 
    min-width: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
} 
 

 
.marketing__row { 
 
    margin-bottom: 8px; 
 
    width: 100%; 
 
} 
 

 
input[type="text"], 
 
input[type="email"], 
 
input[type="tel"], 
 
input[type="file"], 
 
.filelabel { 
 
    border: 0; 
 
    background: #f7f7f7; 
 
    width: 100%; 
 
    height: 44px; 
 
    padding: 0 30px; 
 
    font-size: 15px; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 
input[type="file"] { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 0; 
 
    opacity:0 
 
} 
 

 
.filelabel { 
 
    display:block; 
 
    color: #595959; 
 
    height:42px; 
 
    line-height:42px; 
 
} 
 

 
input, 
 
select, 
 
textarea, 
 
.filelabel { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 12px; 
 
    color: #595959; 
 
} 
 

 
textarea { 
 
    border: 0; 
 
    background: #f7f7f7; 
 
    width: 100%; 
 
    height: 155px; 
 
    padding: 15px 30px; 
 
    font-size: 15px; 
 
    resize: none; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 
.button { 
 
    display: inline-block; 
 
    border: 3px solid #efc506; 
 
    color: #efc506; 
 
    font-size: 18px; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-family: 'BrandonTextBlack'; 
 
    padding: 12px 36px; 
 
    background: none; 
 
    transition: all 0.2s; 
 
    position: relative; 
 
}

<div class="marketing__block"> 
 
    <h4>Solliciteer online</h4> 
 

 
    <form name="job_form" method="post" action="" enctype="multipart/form-data" class="ng-pristine ng-valid"> 
 
    <fieldset> 
 
     <div class="marketing__row"> 
 
     <input type="text" id="job_form_firstName" name="job_form[firstName]" required="required" placeholder="Voornaam *"> 
 
     </div> 
 

 
     <div class="marketing__row"> 
 
     <input type="text" id="job_form_name" name="job_form[name]" required="required" placeholder="Naam *"> 
 
     </div> 
 

 
     <div class="marketing__row"> 
 
     <input type="email" id="job_form_email" name="job_form[email]" required="required" placeholder="Email *"> 
 
     </div> 
 

 
     <div class="marketing__row"> 
 
     <input type="text" id="job_form_tel" name="job_form[tel]" placeholder="Telefoon Nr."> 
 
     </div> 
 

 
     <div class="marketing__row"> 
 
     <input type="text" id="job_form_url" name="job_form[url]" placeholder="Url"> 
 
     </div> 
 

 

 
     <div class="marketing__row"> 
 
     <label for="job_form_attachment" class="filelabel">Label</label> 
 
     <input type="file" id="job_form_attachment" name="job_form[attachment]" placeholder="form.label.attachment"> 
 
     </div> 
 

 

 
     <div class="marketing__row"> 
 
     <textarea id="job_form_message" name="job_form[message]" placeholder="Bericht"></textarea> 
 
     </div> 
 

 

 

 

 
     <div><button type="submit" id="job_form_submit" name="job_form[submit]" class="button">Verstuur</button></div> 
 
    </fieldset> 
 
    <input type="hidden" id="job_form_type" name="job_form[type]" value="form_job_application"><input type="hidden" id="job_form__token" name="job_form[_token]" value=""> 
 
    </form> 
 
</div>