css - 在 ruby​​ on rails 或 CSS 中修改文件上传按钮的外观

标签 css ruby-on-rails

标题说明了一切。你是怎么做到的?例如,编辑文件上传按钮的宽度会导致:http://i.imgur.com/jacnps2.png为了比较,这是一个普通的文件上传按钮:http://i.imgur.com/tIy05HA.png

红色矩形代表按钮通常占据的区域。此外,当您将光标悬停在该点上时(红色和蓝色矩形重叠的地方除外),您的光标会变成一个手形图标,表示当您单击该区域时会发生一些事情。然而,什么也没有发生。

蓝色矩形表示您可以点击屏幕的哪一部分(大部分是不可见的,并且比平时小得多)来显示文件上传表单。

尝试编辑文件上传按钮的高度会产生类似的结果,只是垂直方向而非水平方向。

为了解释我的目标是什么:我想在我的网站上的用户头像顶部过度透明或不可见的文件上传按钮。到目前为止,我已经完成了简单的部分,使文件上传按钮透明并将其覆盖在用户头像之上,但我还没有想出如何编辑文件上传按钮的可用尺寸。举一个有效的例子,如果你有 facebook 个人资料,转到你的个人资料并将鼠标悬停在你的头像上。将出现“更新个人资料图片”字样,您可以单击它们直接从您的个人资料编辑您的头像,而不必转到单独的设置页面。

最佳答案

您不能设置文件上传按钮的样式,它们是浏览器原生的,并且在不同的浏览器中呈现不同。所有这些样式的文件上传按钮都不是实际的文件上传按钮,而是模拟文件上传按钮的行为。

使用 CSS 和 Javascript 有不同的方法。其中大部分涉及隐藏原生按钮并使用 position: absoluteopacity CSS 属性在其顶部放置自定义按钮,并在点击自定义按钮时模拟点击原生按钮按钮。

由于网络上有很多解决方案,我将向您推荐这些解决方案,而不是在此处发布解决方案。

见下文:

关于css - 在 ruby​​ on rails 或 CSS 中修改文件上传按钮的外观,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38539860/

相关文章:

html - 针对 shopify 中的不同模板

ruby-on-rails - Bundler::GemRequireError:尝试加载 gem 'omniauth-oauth2' 时出错

ruby-on-rails - PostgreSQL 和 Lion - 路径

ruby-on-rails - ASCII-8BIT 中的 Rails 编码

javascript - 如何让div像弹出窗口一样隐藏和显示?

css - 一旦将图像设置为百分比大小,是否有办法将图像恢复为原始大小?

javascript - Img 下拉问题

html - 布置此文本的最佳方式?

ruby-on-rails - 我如何找到属于特定用户的特定宠物的所有寄生虫?

ruby-on-rails - Ruby 中的 Mechanize 和 SSLError