聯系表格7文件輸入按鈕的設計

Question

我已經在WordPress網站上安裝了Contact form 7，並且已經成功設置了其余字段的樣式，但是不幸的是，我找不到如何設置“文件附加”按鈕樣式的解決方案。 我已在管理面板中插入了在聯系表格7模塊中編寫的代碼。 除此之外，我在style.css中有CSS。

誰能幫我？

<div class="container">

<div class="row">

<div class="col-md-4">
<p>Your Name (required)<br />
    [text* your-name] </p>
</div>

<div class="col-md-4">
<p>Your Email (required)<br />
    [email* your-email] </p>
</div>

<div class="col-md-4">
<p>Subject<br />
    [text your-subject] </p>
</div>
</div>

<div class="row">

<div class="col-md-8">
<p>Your Message<br />
    [textarea your-message] </p>
</div>

<div class="col-md-4">

[file* uploadcv limit:50000000 class:cv-upload]

</div>
</div>

<div class="row">
<div class="col-md-4 ">
[recaptcha id:recapcha class:recapcha]
</div>

<p>[submit "Send"]</p>
</div>

</div>

Answer 1

像這樣使用HTml

<div id="upload-file">
   <input type="file" name="photo" />
</div>

和CSS

#upload-file {
   background: url(images/custom-file-input.png) no-repeat;
}

#upload-file input {
    opacity: 0;
    display:inherit;
}

我認為它將起作用。

Answer 2

我喜歡使用公認的按鈕進行文件輸入的想法（因為該框架是Bootstrap），所以我使用.btn-file

  .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; } 

 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> <span class="btn btn-success btn-file"> Browse <input name="file" type="file"> </span> 

Answer 3

這就是我用的

聯絡表格

*名稱
[文字*您的姓名]

*電子郵件
[電子郵件*您的電子郵件]

學科
[給您的主題發短信]

input [type = submit] {background-color：＃3498db; 顏色：#fff; 邊界：無； 內邊距：7px 27px; } textarea {height：100px;}

你的信息
[textarea您的消息]

[提交“發送”]