修改ruby on rails或CSS中文件上载按钮的外观
标题说明了一切。你怎么做这件事？例如，编辑文件上传按钮的宽度会导致以下结果：http://i.imgur.com/jacnps2.png以进行比较，下面是一个普通的文件上传按钮：http://i.imgur.com/tIy05HA.png
红色矩形表示按钮通常占用的区域。此外，当您将光标悬停在该区域(除了红色和蓝色矩形重叠的地方)时，您的光标将转换为手动图标，这表明当您单击该区域时会发生一些事情。然而，什么都没有发生。
蓝色矩形表示您可以单击屏幕的哪个部分(大部分是不可见的，并且比平常小得多)来显示文件上载表单。
尝试编辑文件上传按钮的高度会产生类似的结果，只是垂直的，而不是水平的。
为了解释我的目标是什么:我想在我的网站上的用户头像上设置一个透明或不可见的文件上传按钮。到目前为止，我已经完成了简单的部分，使文件上传按钮透明，并将其覆盖在用户的化身上，但我还没有想出如何编辑文件上传按钮的可用维度。关于这方面的工作示例，如果您有facebook配置文件，请转到您的配置文件并将鼠标悬停在您的化身上。单词“更新配置文件图片”将出现，您可以单击它们直接编辑您的化身从您的配置文件，而不必转到一个单独的设置页面。
回答 2
Stack Overflow用户
发布于 2016-07-23 08:56:51
您不能为文件上载按钮设置样式，它们是浏览器固有的，并且在不同的浏览器中呈现不同。所有这些样式文件上传按钮不是实际的文件上传按钮，而是模拟文件上传按钮的行为。
使用CSS和Javascript实现这一点有不同的方法。其中大多数涉及隐藏本机按钮，并使用position: absolute和opacity CSS属性将自定义按钮放在顶部，并模拟单击自定义按钮时单击本机按钮。
由于有相当多的解决方案在网络上这一点，我将参考那些，而不是张贴在这里的解决方案。
见下文：
- http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
- http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
- Cross-browser custom styling for file upload button
Stack Overflow用户
发布于 2020-06-18 20:16:36
我是用after元素和FontAwesome的图标做的。
# your-page.html.erb
<div>
<label class="button-image">
<%= f.file_field :attachment, value: "", class: "active-storage-button" %>
</label>
</div>
# app/assets/stylesheets/your-page.scss
.button-image:hover::after {
content: "\f196";
font: normal normal normal 100px/1 FontAwesome;
color: #778899;
padding: 10%;
right: 10%;
position: relative;
}
.active-storage-button{
display: none;
}
# for hover effect
.button-image:hover::after {
color: #5a5a5a;
cursor: pointer;
}https://stackoverflow.com/questions/38539860
复制相似问题
腾讯云开发者
