6

我有一个“提交”按钮，我试图用图像替换它

<input type="submit" value="Continue" />

我不能修改 HTML，也不能使用 JavaScript。我只能访问 CSS。

是否可以仅使用 CSS 删除“继续”（value属性）一词？

编辑

我实际上已经能够使用图像设置按钮的样式。我现在想删除“继续”按钮。我已经通过将text-indent值设置为负数来做到这一点，这是前段时间在这里提出的，但被删除了。我想知道是谁发布的，所以我可以接受它作为答案。

4

4 回答 4

28

免责声明：这是一个糟糕的答案——我希望你也知道，在你的内心深处。如果你嘲笑我的公平警告，来自 CeSSei 8 的外星人会绑架你，让你在 4 维中建模。赞成这个答案，风险自负。我在现在看来是另一种生活中写下了它，每次阅读它都会深入我的灵魂深处。我为网络哭泣。你被警告了。

我无法想象为什么有人需要仅使用 CSS来删除控件的值。我当然从来不需要考虑这样做。

font-size: 0无论如何，使元素无法使用em和 单位的替代方法是使用ex透明的“画笔”渲染文本，实际上根本不渲染它：

color: transparent;

请注意，应用于输入元素的上述规则对元素中占位符文本的颜色没有影响。

与大多数此类“黑客”一样，此解决方案存在许多问题-您可能希望至少user-select: none与上述规则一起添加以禁用用户对文本的选择，因为选择它会将其暴露在纯色背景色中的选择，这可能是可取的，也可能不是可取的。

于 2012-10-04T09:22:36.053 回答
5 
input[type="submit"] {
  font-size:0;
  width:120px;
  height:30px;
  background: url('dir/image.png') no-repeat left top;
  border: none;
}

这会成功的。请记住，您的图像路径是相对于样式表的。

于 2012-10-04T09:14:00.577 回答
3

使用font-size: 0：

input[type="submit"] {
    font-size:0;
    width:100px;
    height:20px;
    background:red; /** or `background: url('some.jpg') no-repeat 0 0;` */
    border:0;
    cursor:pointer;
}

演示

于 2012-10-04T09:12:30.813 回答
1

添加到SpaceBeer的答案中，如果有的话，最好使用否定text-indent并删除文本。

input[type="submit"] {
  font-size:0;
  width:120px;
  height:30px;
  background: url('dir/image.png') no-repeat left top;
  border: none;
  overflow: hidden;
  text-indent: -99em;
}

这是正确的方法，几乎​​所有的地方都建议。此外，您可以在此处找到演示：http: //jsfiddle.net/6MKKh/

于 2012-10-04T09:23:32.653 回答