![](/img/trans.png)
[英]How to style the "Search Computer" File Upload button for eMail Contact Form 7?
[英]How to style contact form 7 file input buttons
我似乎無法定位用於在聯系表單 7 中上傳文件的按鈕。我如何定位選擇文件按鈕,以便我可以添加背景顏色等。哦,我也在這樣做,這是 WordPress 以防萬一你需要知道那個。 所以在后端它看起來像這樣;
<label class="form_label"> Your Name<span>*</span>
[text* your-name]</label>
<label class="form_label"> Your Email<span>*</span>
[email* your-email]</label>
<label class="form_label">Tel
[tel tel]</label>
<label class="form_label">CV<span>*</span>
[file cv id:upload]</label>
<label class="form_label">Cover Letter
[textarea your-message]</label>
[submit "Send"]
我的輸出 html 如下所示。
<div role="form" class="wpcf7" id="wpcf7-f47-o1" lang="en-US" dir="ltr"> <div class="screen-reader-response"></div> <form action="/Lester_Goddard_New/#wpcf7-f47-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="47" /> <input type="hidden" name="_wpcf7_version" value="4.9" /> <input type="hidden" name="_wpcf7_locale" value="en_US" /> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f47-o1" /> <input type="hidden" name="_wpcf7_container_post" value="0" /> </div> <p><label class="form_label"> Your Name<span>*</span><br /> <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span></label></p> <p><label class="form_label"> Your Email<span>*</span><br /> <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span></label></p> <p><label class="form_label">Tel<br /> <span class="wpcf7-form-control-wrap tel"><input type="tel" name="tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" /></span></label></p> <p><label class="form_label">CV<span>*</span><br /> <span class="wpcf7-form-control-wrap cv"><input type="file" name="cv" size="40" class="wpcf7-form-control wpcf7-file" aria-invalid="false" /></span></label></p> <p><label class="form_label">Cover Letter<br /> <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span></label></p> <p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p> <div class="wpcf7-response-output wpcf7-display-none"></div> </form> </div>
我不得不改變visibility:hidden;
按opacity:0;
根據https://www.quirksmode.org/dom/inputfile.html所以按鈕繼續工作,否則點擊不會提示瀏覽。
您不能像任何按鈕一樣設置文件上傳按鈕的樣式,而是可以使用偽元素來覆蓋按鈕並對其應用樣式。 你可以嘗試這樣的事情。 您可以根據需要更改“新建”按鈕的內容和樣式:
span.cv { position:relative; } span.cv:before { content:"Upload file"; position:absolute; left:0; padding:5px; background:red; color:#fff; width:130px; text-align:center; border-radius:5px; cursor:pointer; } span.cv>input { visibility:hidden; }
<div role="form" class="wpcf7" id="wpcf7-f47-o1" lang="en-US" dir="ltr"> <div class="screen-reader-response"></div> <form action="/Lester_Goddard_New/#wpcf7-f47-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="47" /> <input type="hidden" name="_wpcf7_version" value="4.9" /> <input type="hidden" name="_wpcf7_locale" value="en_US" /> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f47-o1" /> <input type="hidden" name="_wpcf7_container_post" value="0" /> </div> <p><label class="form_label"> Your Name<span>*</span><br /> <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span></label></p> <p><label class="form_label"> Your Email<span>*</span><br /> <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span></label></p> <p><label class="form_label">Tel<br /> <span class="wpcf7-form-control-wrap tel"><input type="tel" name="tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" /></span></label></p> <p><label class="form_label">CV<span>*</span><br /> <span class="wpcf7-form-control-wrap cv"><input type="file" name="cv" size="40" class="wpcf7-form-control wpcf7-file" aria-invalid="false" /></span></label></p> <p><label class="form_label">Cover Letter<br /> <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span></label></p> <p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p> <div class="wpcf7-response-output wpcf7-display-none"></div> </form> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.