Изменить тип ввода текста файла - PullRequest
Новая
       4

Изменить тип ввода текста файла

0 голосов
/ 15 февраля 2020

Я хочу изменить свой тип ввода = "file" css стиль как на этом изображении:

enter image description here

Это мой фактический код: 

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

и вот так выглядите сейчас:

enter image description here

Заранее спасибо.

1 Ответ

1 голос
/ 15 февраля 2020

попробуйте этот код: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...