Firefox 和 IE 将“选择文件”按钮放在文件路径的右侧,而 WebKit 将其放在左侧。这使得 WebKit 也将其放在右侧。
<input type="file">
input[type="file"]{
-webkit-appearance: none;
text-align: left;
-webkit-rtl-ordering: left;
}
input[type="file"]::-webkit-file-upload-button{
-webkit-appearance: none;
float: right;
margin: 0 0 0 10px;
border: 1px solid #aaaaaa;
border-radius: 4px;
background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0));
background-image: -moz-linear-gradient(90deg, #d2d0d0 0%, #f0f0f0 100%);
}
你为什么在 WebKit 特定的选择器中使用 -moz-linear-gradient?在这种情况下,是
input[type="file"]::-webkit-file-upload-button
。好点! :)
我今天早上刚听了你的 SitePoint 播客,然后,瞧,你就在这里帮助我让 Webkit 符合标准。太棒了,谢谢。
我的网站刚刚起步。
我一直都在 Accenture 工作,一家很棒的公司,但留给 html 开发的时间很少。只是把它当作爱好开始。我的朋友,有可能靠做这样的网站谋生吗?或者这仅仅是你的爱好?
另一个问题,我非常喜欢这个评论设计,它是如何创建的!我需要一个像这样的评论区=)
很棒的工作!
谢谢
来自蒙特雷的 Daniel
有什么意义?
你好,
帖子中提供的解决方案在 Chrome 中完全有效。感谢你的辛勤工作。但它不支持 Mozilla。
对此有什么解决方案吗?
不幸的是,这似乎不再起作用了 :( 有什么新的解决方案吗?
它正在工作并将上传按钮保持在右侧,但右侧上传按钮的默认空间是空的,它没有将“未选择文件”文本对齐到右侧。
有什么想法如何将文本移动到左侧吗?
嘿,Anjali!可以通过使用
position
控制放置来将按钮进一步推到右侧。这是一个示例:https://codepen.io/geoffgraham/pen/mddmMRp嗨,Geoff,
感谢你的回复。我想将文本对齐到左侧。文本 https://codepen.io/geoffgraham/pen/mddmMRp“未选择文件”或选择后的文件名可以对齐到左侧吗?