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

我已經在我的WordPress網站上安裝了聯繫表格7，併成功地設置了其餘字段的樣式，但不幸的是，我找不到解決方案如何設置文件附加按鈕的樣式。我在管理面板中插入了我在聯繫人窗體7模塊中編寫的代碼。除此之外，我在style.css中爲它提供了CSS;聯繫表格7文件輸入按鈕設計

誰能幫助我？

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

來源

2015-11-19 elodpal

輸入類型字段僅通過使用jquery –

改變你能把我鏈接到你的聯繫頁面的實時版本嗎？我有一個CSS hack，我總是用來設置我的文件輸入按鈕的樣式。我需要檢查'elements'來做相應的調整。 :) –

和@Deepaksaini，你的項目/頁面的每個部分依賴於jQuery是可恥的。你甚至不需要JavaScript。你可以通過純CSS實現。 –

使用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; 
}

我認爲它會工作。

來源

2015-11-19 12:36:39

似乎正在工作，thx隊友:) – elodpal

我喜歡使用公認的按鈕，文件輸入（因爲框架是引導）的想法，所以我用.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>

來源

2015-11-19 12:49:25

這是我使用

聯繫表格

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

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

主題
[文字的學科]

輸入[類型=提交] { background-color：＃3498db; color：#fff; border：none; padding：7px 27px; } textarea的{高度：100像素;}

您的消息
[textarea的您的消息]

[提交的「發送」]

來源

2016-03-29 11:47:37

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

回答

相關問題