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

Posted 2023-03-05

【中文标题】联系表格7文件输入按钮设计

【英文标题】：Contact form 7 file input button design

【发布时间】：2016-02-21 14:02:19

【问题描述】：

我已经在我的 WordPress 网站上安装了联系表格 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>

【问题讨论】：

输入类型字段只能通过jquery来改变

您能否将我链接到您的联系页面的实时版本？我有一个 CSS hack，我总是用它来设置文件输入按钮的样式。我需要检查elements 以进行相应调整。 :)

和@Deepaksaini，在项目/页面的每个部分都依赖 jQuery 是可耻的。你甚至不需要 javascript。你可以通过纯 CSS 来实现。

看看我的回答。

@AdamAzad 不幸的是我不能给你确切的链接，因为该站点在我的本地计算机上。你能把代码贴出来吗，也许我可以试着弄清楚:)

【参考方案1】：

这是我用的

联系方式

*姓名 [文字*你的名字]

*电子邮件 [电子邮件*您的电子邮件]

主题 [给你的主题发短信]

输入[类型=提交] 背景颜色：#3498db； 颜色：#fff; 边框：无； 填充：7px 27px； textarea 高度：100px;

您的留言 [textarea 你的消息]

[提交“发送”]

【参考方案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>

【参考方案3】：

像这样使用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;

我认为它会起作用。