如何将文件输入按钮放置在文本字段内的右侧答案

【问题标题】：How do I position the file input button on the right hand side inside the textfield如何将文件输入按钮放置在文本字段内的右侧
【发布时间】：2013-09-20 13:12:40
【问题描述】：

如何将文件输入按钮放置在文本字段内的右侧这是我的小提琴 http://jsfiddle.net/cancerian73/TurGw/

这就是我想要的截图

input[type=file] {
-webkit-appearance: textfield;
position: relative;
-webkit-box-sizing: border-box;
 }
 input[type=file]::-webkit-file-upload-button {
width: 0;
padding: 0;
margin: 0;
-webkit-appearance: none;
border: none;
 }
 /* "x::-webkit-file-upload-button" forces the rules to only apply to browsers that support this pseudo-element */
  x::-webkit-file-upload-button, input[type=file]:after {
content:'Browse...';
display: inline-block;
left: 100%;
margin-left:3px;
position: relative;
-webkit-appearance: button;
padding: 3px 8px 2px;
 }

【问题讨论】：

这需要特定于 WebKit 还是什么？你有很多 -webkit-* 规则，这使得这在 Firefox 中看起来完全不同。如果是这样，您可能应该在您的问题上添加一个标签。
您可能想查看this 的帖子或this 的帖子。
@ajp15243：是的，正确的观点。从 CSS 中的注释中，我假设它仅适用于基于 Webkit 的浏览器。现在不确定:(

标签： jquery html css forms

【解决方案1】：

你只是“伪造”了一个边框

小提琴：http://jsfiddle.net/TurGw/3/

HTML：

<form action="" method="post">
    <div class='upload-border'>
        <input type="file" name="upload"/>
    </div>
</form>

CSS：

.upload-border{
    border:1px solid black;
    width:315px;
}
input[type=file]::-webkit-file-upload-button {
    width: 0;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    border: none;
    border:0px;
}

 x::-webkit-file-upload-button, input[type=file]:after {
    content:'Browse...';
    left: 100%;
    margin-left:3px;
    position: relative;
    -webkit-appearance: button;
    padding: 3px 8px 2px;
    border:0px;
}

【讨论】：

但现在我在更改按钮颜色时遇到了问题。我的意思是造型..抱歉打扰你
按钮颜色的样式在最后部分：x::-webkit-file-upload-button, input[type=file]:after, 可以在里面添加css
我做了，但没有发生任何事情......这是小提琴jsfiddle.net/cancerian73/TurGw/5
你的“-webkit-appearance”属性强制按钮，删除它。