Contact form 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

这是我用的

联系方式

*Name
[text* your-name]

*Email
[email* your-email]

Subject
[text your-subject]

input[type=submit] { background-color: #3498db; color: #fff; border: none; padding: 7px 27px; } textarea {height:100px;}

Your Message
[textarea your-message]

[submit "Send"]

Contact form 7文件输入按钮设计

Contact form 7 file input button design

html

css

wordpress

contact-form-7