无法在<input type =“file”/>上保留对齐文本

Question

带文件上传按钮的输入是：

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>

但由于未知原因，文字没有向左移动。它甚至覆盖了下载按钮。截图：

任何人都可以帮助如何向左移动文字吗？我在Google Chrome上使用纯css进行定位。

Answer 1

您可以使用方向rtl从右到左显示输入，而不是从左到右。希望它有所帮助

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>

Answer 2

对于寻求类似事情的人来说，这就是解决方案。

＆＃13;

＆＃13;

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

＆＃13;

<div> <label for="fileOTHER">File:</label> <input maxsize="255" size="20" onbeforeeditfocus="return false;" type="file" name="file" id="fileOTHER"> </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试添加

  

  
• 显示：网格;
  
• justify-content：start;
  

输入。