更改輸入類型文件文本

Question

我想更改我的 input type="file" css 樣式，如下圖所示：

這是我的實際代碼：

<div class="control">
        <input name="attachment" id="attachment" title="<?= $block->escapeHtmlAttr(__('Attachment')) ?>" value="<?= $block->escapeHtmlAttr($this->helper('Magento\Contact\Helper\Data')->getPostValue('attachment')) ?>" class="filestyle" type="file"/><i class="fas fa-paperclip"></i>
    </div>
    <label class="control-label" for="attachment"><span><?= $block->escapeHtml(__('Attachment (Optional)') ?></span></label>
</div>

現在看起來像這樣：

先感謝您。

Answer 1

試試這個代碼：

 label.custom_file { width: 300px; padding: 8px; height: 45px; position: relative; cursor: pointer; background-color: #eaeaea; } label.custom_file:before { content: '\\f0c6'; position: absolute; right: 0; top: 0px; padding: 9px 15px; height: 45px; background-color: #f5f5f5; }

 <html> <head> <title> Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> </head> <body> <div class="form-group"> <input type="file" class="form-control" id="file" style="display: none;"> <label for="file" class="custom_file"> Attachment(optional)</label> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script type="text/javascript" src="js/custom.js"></script> </body> </html>

更改輸入類型文件文本

問題描述

1 個解決方案

解決方案1
1 已采納 2020-02-15 13:04:51

更改輸入類型文件文本

問題描述

1 個解決方案

解決方案1 1 已采納 2020-02-15 13:04:51

解決方案1
1 已采納 2020-02-15 13:04:51