入力ファイルのフィールドテキストのスタイルが適用されない

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>