更改输入类型文件文本
[英]Change input type file text
问题描述
I want to change my input type="file" css style like in this image:
我想更改我的 input type="file" css 样式，如下图所示：
This is my actual code:这是我的实际代码：
<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>
and like this look now:现在看起来像这样：
Thank you in advance.先感谢您。
1 个解决方案
解决方案1
1 已采纳 2020-02-15 13:04:51
try this code:试试这个代码：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
JavaScript将输入类型=“text”更改为type =“file” - JavaScript change input type=“text” to type=“file”
如何<label>使用文件名</label>更改里面<label>的</label>文本<label><input type="file" /></label> - How to change text inside <label> with the file name of <input type="file" />
输入类型=文件框已填充时更改按钮文本 - change button text when input type = file box is filled
如何更改输入类型=“文件”元素的按钮文本 - How to change the button text of input type=“file” element
文件类型更改（HTML输入[type = file]） - File type change (HTML input[type=file])
更改语言输入类型=文件 - change language input type=file
将输入类型=“文本”更改为输入类型=“密码”onfocus（） - Change input type=“text” to input type=“password” onfocus()
如何改变 <input type=“text”> 按属性值 - How to change <input type=“text”> value by attribute
更改文本类型输入以设置密码格式 - Change text type input to format password
如何在 Javascript 中将输入类型更改为仅文本 - How to change input type to just text in Javascript
相关标签