Question

我想将登录页面的提交按钮设为图片而不是灰色按钮。当我使用css执行此操作时，我会在图片顶部显示按钮。有没有办法使用

= submit_tag image_tag('image/location.jpg) 'Login', :id => 'Login'

如果我可以将按钮调整到某个尺寸也可以正常工作，因为我可以将它放在我想要的地方用css。

谢谢！

Answer 1

据我所知，有一个<input type="image" src="..."/>可以使图像充当提交按钮。我不知道ruby on rails，但快速搜索了image_submit_tag(source, options = {})。您可以查看文档here。

Answer 2

你试过了吗？

.element {
    appearance: none;
    -webkit-appearance: none;
    background-image: url(path/img-png) no-repeat 0 0;
    background-size: /* (desired size in pixels or %) */ 40px 50px;
    -moz-background-size: /* (desired size in pixels or %) */ 40px 50px;
    border: none;
    outline: none;
    /* any other desired rules */
}

Answer 3

使用<input>代码替换<img>按钮并不是一个好主意，因为它违反了progressive enhancement的原则：您应该尽可能地保持您的网站的可访问性，同时增强其功能当浏览器允许时。

在您的情况下，有一个纯CSS解决方案可以将经典<input type=submit>按钮转换为图像：

input {

  /* sizing the button */
  width: 10em;
  height: 10em;

  /* disabling the system look */
  appearance: none;
  -webkit-appearance: none;

  /* resetting default browser styler */
  border: 0;
  margin: 0;
  padding: 0;

  /* hiding button label */
  text-indent: -9999px;

  /* applying the image */
  background: url('http://i.imgur.com/1x8TMLt.jpg') no-repeat transparent;
  background-size: 100% 100%; /* stretching */

  /* letting users know it's clickable */
  cursor: pointer;
}

当CSS由于某种原因不可用时，该按钮将显示为带有文本标签的按钮。当CSS可用时，按钮将显示为给定大小的图像，是的！

演示：http://jsbin.com/okasut/1/edit

当然，你应该使用一些语义选择器。

Answer 4

submit_tag会生成一个html input type='submit'。你想要一个html button，哪些铁路可以使用button_tag生成。

= button_tag :id => 'Login' do
  image_tag('image/location.jpg')

使用图片作为提交按钮

4 个答案: