CODEWITHSUNDEEP
javascripthtmlcssfile
Suraj-Ui
Suraj-Ui

Reputation: 196

I want to customized this file type input using css

I have used the below code for customized but it's not working and not meeting my requirements so anyone has an idea about this then helps me for solving this problem . It should look like as given in the image. I need a file upload logo on the right side and read-only input. enter image description here

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

Upvotes: 0

Views: 91

Answers (3)

Sleek Geek
Sleek Geek

Reputation: 4686

You can achieve the result with CSS :after selector. See the changes and notes I added to your code and adjust as needed. 

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

  • Don't forget the Icon library that you decide to use. Fontawesome or Material icons.

  • Don't just copy the answer, read my comments to learn.

  • Let me know if you have any questions

Upvotes: 1

Raeesh Alam
Raeesh Alam

Reputation: 3480

If you are using Bootstrap4 then don't need to write single line of CSS code just write jQuery code to show file name after change and input file tag put inside label tag
I hope below snippet will help you lot. 

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

Upvotes: 2

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

try this code:

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>

Upvotes: 2

Related Questions