輸入文件字段文本樣式不適用

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>