css 如何设计联系人表单7文件输入按钮

lmvvr0a8 于 2022-12-20 发布在其他

关注(0)|答案(2)|浏览(97)

我似乎不能在联系表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>

css

来源：https://stackoverflow.com/questions/46928807/how-to-style-contact-form-7-file-input-buttons

2条答案

按热度按时间

esyap4oy1#

我不得不将visibility:hidden;更改为opacity:0;
根据https://www.quirksmode.org/dom/inputfile.html，按钮继续工作，否则单击未提示浏览。

赞(0）回复(0）举报 2022-12-20

flseospp2#

文件上传的按钮不能像其他按钮一样进行样式设置，可以使用伪元素覆盖按钮并应用样式，可以尝试如下操作，可以根据需要更改"新建"按钮的内容和样式：

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>

赞(0）回复(0）举报 2022-12-20

我来回答

css 如何设计联系人表单7文件输入按钮

2条答案

相关问题

热门标签

最新问答