【问题标题】：I want to customized this file type input using css我想使用 css 自定义此文件类型输入
【发布时间】：2020-02-04 06:40:48
【问题描述】：
我已使用以下代码进行自定义，但它不起作用且不符合我的要求，因此任何人对此有所了解，然后帮助我解决此问题。它应该看起来像在图像中给出的。我需要右侧的文件上传徽标和只读输入。
.it .btn-orange
{
background-color: blue;
border-color: #777!important;
color: #777;
text-align: left;
width:100%;
}
.it input.form-control
{
border:none;
margin-bottom:0px;
border-radius: 0px;
border-bottom: 1px solid #ddd;
box-shadow: none;
}
.it .form-control:focus
{
border-color: #ff4d0d;
box-shadow: none;
outline: none;
}
.fileUpload {
position: relative;
overflow: hidden;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.upl{
border: 1px solid black;
float: left;
margin-top: -20px;margin-left: 172px;
background-color: lightslategray;
}
<body style="background-color: #00ced1">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" readonly>
<div class="input-group-btn">
<span class="fileUpload btn btn-success">
<span class="upl" id="upload">Upload</span>
<input type="file" class="upload up" id="up" onchange="readURL(this);" />
</span><!-- btn-orange -->
</div><!-- btn -->
</div><!-- group -->
</div>
</body>
【问题讨论】：
标签：
javascript
html
css
file
【解决方案1】：
试试这个代码：
label.custom_file {
border : 1px solid grey;
width : 300px;
padding : 8px;
height : 45px;
position: relative;
cursor: pointer;
}
label.custom_file:before {
content : '\f0c6';
position : absolute;
right : 0;
top : 0px;
padding : 9px 15px;
border-left : 1px solid #929292;
height : 43px;
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"> select file</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>
【解决方案2】：
如果您使用的是Bootstrap4，则无需编写单行CSS代码，只需编写jQuery代码以显示更改后的文件名并将input file标签放入label tag
我希望下面的sn-p对你有很大帮助。
$(document).on('change', '[data-imageload]', function(e){
$($(this).data('imageload')).html(e.target.files[0].name).attr('title', e.target.files[0].name);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container my-3">
<div class="row justify-content-center">
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label class="input-group form-file">
<input type="file" data-imageload="#filename" hidden>
<span class="form-control rounded-left text-truncate" id="filename">Select file to verify skill(s)</span>
<div class="input-group-append">
<span class="input-group-text">Upload</span>
</div>
</label>
</div>
</div>
</div>
</div>
【解决方案3】：
您可以使用 CSS :after 选择器来实现结果。查看我添加到您的代码中的更改和注释，并根据需要进行调整。
$(function () {
$("input[type=text]").click(function () {
// Check when the value of the file field changes
$(".upload").trigger("click").on("change", function () {
// Use the value of the file field fo the text field value
$("input[type=text]").val($(this).val());
});
});
});
.it .btn-orange {
background-color: blue;
border-color: #777!important;
color: #777;
text-align: left;
width: 100%;
}
.it input.form-control {
border: none;
margin-bottom: 0px;
border-radius: 0px;
border-bottom: 1px solid #ddd;
box-shadow: none;
}
.it .form-control:focus {
border-color: #ff4d0d;
box-shadow: none;
outline: none;
}
.fileUpload {
position: relative;
overflow: hidden;
}
.fileUpload input.upload {
position: absolute;
top: -10px!important;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
/* I made additions from here */
.upl {
border: 1px solid black;
float: left;
margin-top: -39px;
margin-left: 272px;
background-color: lightslategray;
height: 39px!important;
width: 70px;
border: none;
background: #eaeaea;
position: relative;
pointer-events: none;
}
.upl:after {
content: "attach_file"; /* Name of the icon as content */
width: 100%;
height: 100%;
position: absolute;
text-align: center!important;
line-height: 39px;
font-family: Material Icons; /* You must declare font family */
font-size: 24px;
pointer-events: none; /* So that the :after selector doesn't block the button click */
}
input[type=text] {
width: 300px;
border: 1px solid #eaeaea;
}
input[type=text],
#upload {
position: relative;
height: 35px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body style="background-color: #00ced1">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" readonly>
<div class="input-group-btn">
<span class="fileUpload btn btn-success">
<span class="upl" id="upload"></span>
<input type="file" class="upload up" id="up" onchange="readURL(this);" />
</span>
<!-- btn-orange -->
</div>
<!-- btn -->
</div>
<!-- group -->
</div>
</body>