'Unable to left align text on <input type="file">

Input with file upload button is:

input[type="file"] {
  margin-left: 10px;
  border: 1px solid #b5bcc7;
  width: 360px;
  vertical-align: middle;
  margin-bottom: 10px;
  text-align: left;
}

input[type="file"]::-webkit-file-upload-button {
  background: #485dc5;
  color: #FFFFFF;
  line-height: 38px;
  padding: 0px 20px;
  border: none;
  float: right;
  ;
}
<div> <label for="fileOTHER">File:</label> <input maxsize="255" size="20" onbeforeeditfocus="return false;" type="file" name="file" id="fileOTHER"> </div>

But for unknown reason, the text is not moving to the left. It's even overriding the download button. Screenshot:

enter image description here

Can anyone help on how to move the text towards the left? I am targeting this on Google Chrome with pure css.

cssinput


Solution 1:[1]

You can use direction rtl to display the input from right to left instead of left to right. Hope it helps

input[type="file"] {
  margin-left: 10px;
  border: 1px solid #b5bcc7;
  width: 360px;
  vertical-align: middle;
  margin-bottom: 10px;
  direction: rtl;
}



input[type="file"]::-webkit-file-upload-button {
  background: #485dc5;
  color: #FFFFFF;
  line-height: 38px;
  padding: 0px 20px;
  border: none;
  float: right;
  
}
<div> <label for="fileOTHER">File:</label> <input maxsize="255" size="20" onbeforeeditfocus="return false;" type="file" name="file" id="fileOTHER"> </div>

Solution 2:[2]

For anyone seeking similar thing, here is the solution.

input[type="file"] {
    margin-left: 10px;
    border: 1px solid #b5bcc7;
    width: 250px;
    vertical-align: middle;
    margin-bottom: 10px;
    outline: none;
}

input[type="file"]::-webkit-file-upload-button {
    background: #485dc5;
    color: #FFFFFF;
    line-height: 38px;
    padding: 0px 20px;
    border: none;
    width: 0;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    border: none;
  
}

x::-webkit-file-upload-button, input[type=file]:after {
    content:'Choose File';
    display: inline-block;
    left: 100%;
    margin-left:0px;
    position: relative;
    padding: 0px;
}

input[type=file]:after {
    margin-left: 0px;
    background: #485dc5;
    color: #FFFFFF;
    line-height: 38px;
    padding: 0px 20px;
    border: none;
    outline: 1px solid #485dc5;
}
<div> <label for="fileOTHER">File:</label> <input maxsize="255" size="20" onbeforeeditfocus="return false;" type="file" name="file" id="fileOTHER"> </div>

Solution 3:[3]

input[type=file]{
  margin-left: 10px;
  border: 1px solid #b5bcc7;
  width: 360px;
  text-align: left;
  line-height: 38px;
  padding-left: 5px;
}

input[type="file"]::-webkit-file-upload-button {
  background: #485dc5;
  color: #FFFFFF;
  line-height: 38px;
  padding: 0px 20px;
  margin-right:0;
  border: none;
  float: right;
}
<input type="file" id="files">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jonny
Solution 2 Athar K
Solution 3 kat lisabeth

Related Questions