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

这是我使用的

以联系方式

*名称
      [text * your-name]

*电子邮件
      [email * your-email]

主题
      [发表你的主题]

输入[type = submit]          {       background-color：＃3498db;       颜色：#fff;       border：none;       填充：7px 27px; } textarea {height：100px;}



你的留言
      [textarea你的消息]

[提交＆＃34;发送＆＃34;]

联系表格7文件输入按钮设计

3 个答案: