如何使用 CSS 更改输入按钮图像答案

【问题标题】：How to change an input button image using CSS如何使用 CSS 更改输入按钮图像
【发布时间】：2010-09-16 18:35:31
【问题描述】：

所以，我可以使用图像创建一个输入按钮

<INPUT type="image" src="/images/Btn.PNG" value="">

但是，我无法使用 CSS 获得相同的行为。比如我试过

<INPUT type="image" class="myButton" value="">

其中“myButton”在 CSS 文件中定义为

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

如果这就是我想要做的，我可以使用原始样式，但我想更改悬停时按钮的外观（使用myButton:hover 类）。我知道这些链接很好，因为我已经能够将它们加载为页面其他部分的背景图像（仅作为检查）。我在网上找到了如何使用 JavaScript 的示例，但我正在寻找 CSS 解决方案。

我正在使用 Firefox 3.0.3，如果这有影响的话。

【问题讨论】：

标签： css input-button-image

【解决方案1】：

如果您想使用 CSS 设置按钮样式，请将其设为 type="submit" 按钮，而不是 type="image"。 type="image" 需要一个 SRC，你不能在 CSS 中设置它。

请注意，Safari 不会让您以您正在寻找的方式设置任何按钮的样式。如果您需要 Safari 支持，则需要放置一个图像并具有提交表单的 onclick 功能。

【讨论】：

谢谢。使用“提交”而不是图像来加载图像。
Safari 3 及更高版本允许您随意设置按钮样式。为了更加兼容，请改用
re to be more compatible /

【解决方案2】：

这篇关于CSS image replacement for submit buttons 的文章可能会有所帮助。

“使用此方法，您将在样式表处于活动状态时获得可点击的图像，在样式表关闭时获得标准按钮。诀窍是将图像替换方法应用于按钮标记并将其用作提交按钮，而不是使用输入。

而且由于按钮边框被擦除，因此也建议将按钮光标更改为用于链接的手形，因为这为用户提供了视觉提示。”

CSS 代码：

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

【讨论】：

这个方法的问题是，如果客户端在他们的浏览器中禁用图片，他们根本看不到按钮！

【解决方案3】：

您可以使用<button> 标签。对于提交，只需添加type="submit"。然后在您希望按钮显示为图形时使用背景图像。

像这样：

<button type="submit" style="border: 0; background: transparent">
 <img src="https://i.imgur.com/tXLqhgC.png" width="90" height="90" alt="submit" />
</button>

More info

【讨论】：

记住IE（5,6,7,&8（非标准模式）会提交按钮的.innerHTML，而不是你在按钮上设置的value属性！跨度>
但是
@scunlife，Dimitry 在 additin 发布 innerHtml 导致大多数网络服务器不接受发布的数据，因为它闻起来像注入攻击

【解决方案4】：

也许您也可以只导入一个 .js 文件并在其中用 JavaScript 替换图像。

【讨论】：

这真的太过分了。

【解决方案5】：

div.myButton input {
  background: url(https://i.imgur.com/tXLqhgC.png) no-repeat;
  background-size: 90px;
  width: 90px;
  height: 90px;
  cursor: pointer;
  border: none;
}

<div class="myButton">
  <INPUT type="submit" name="" value="">
</div>

这在任何地方都可以使用，即使在 Safari 中也是如此。

【讨论】：

【解决方案6】：

这是一个更简单的解决方案，但没有额外的周围 div：

<input type="submit" value="Submit">

CSS 使用基本的图像替换技术。对于奖励积分，它使用图像精灵显示：

<style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>

来源： http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/

【讨论】：

如果属性 CSS 选择器 (type="submit") 和精灵推荐有此答案的按钮，我会点击 +2
我不控制那个网站。好在我把解决方案放在我的答案中。
最后保存的链接版本：web.archive.org/web/20140112085651/http://work.arounds.org/…
链接已损坏 (404)。也许更新您的答案以反映这一事实？但是没有“编辑：”、“更新：”或类似的 - 答案应该看起来好像是今天写的。

【解决方案7】：

这是在 Internet Explorer 上对我有用的方法，对 Philoye 的解决方案进行了轻微修改。

>#divbutton
{
    position:relative;
    top:-64px;
    left:210px;
    background: transparent url("../../images/login_go.png") no-repeat;
    line-height:3000;
    width:33px;
    height:32px;
    border:none;
    cursor:pointer;
}

【讨论】：

【解决方案8】：

您可以使用 blank.gif（单像素透明图像）作为标签中的目标：

<input type="image" src="img/blank.gif" class="button">

然后在 CSS 中设置背景样式：

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}

【讨论】：

【解决方案9】：

之前答案的变体：

我发现需要设置不透明度，当然这可以在 Internet Explorer 6 及更高版本中使用。 Internet Explorer 8 中的 line-height 解决方案存在问题，即按钮没有响应。有了这个，你也会得到一个手形光标！

<div id="myButton">
    <input id="myInputButton" type="submit" name="" value="">
</div>

#myButton {
    background: url("form_send_button.gif") no-repeat;
    width: 62px;
    height: 24px;
}

#myInputButton {
    background: url("form_send_button.gif") no-repeat;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    width: 67px;
    height: 26px;
    cursor: pointer;
    cursor: hand;
}

【讨论】：

【解决方案10】：

我认为以下是最好的解决方案：

CSS：

.edit-button {
    background-image: url(edit.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

HTML：

<input class="edit-button" type="image" src="transparent.png" />

【讨论】：

【解决方案11】：

我没有 JavaScript 和没有图像的解决方案是这样的：

HTML：

<input type=Submit class=continue_shopping_2
       name=Register title="Confirm Your Data!"
       value="confirm your data">

CSS：

.continue_shopping_2: hover {
    background-color: #FF9933;
    text-decoration: none;
    color: #FFFFFF;
}


.continue_shopping_2 {
    padding: 0 0 3px 0;
    cursor: pointer;
    background-color: #EC5500;
    display: block;
    text-align: center;
    margin-top: 8px;
    width: 174px;
    height: 21px;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: #919191;
    font-family: Verdana;
    font-size: 13px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    color: #FFFFFF;
}

【讨论】：

以这种方式发布随机链接到您的网站是不合适的。我在那里根本看不到这方面的“例子”。如果您想制作一个示例来展示，请制作一个本身作为示例的示例 - 而不是在整个实时网站的上下文中。
没错...事实上无法直接访问正确的页面...只能将 1 件商品添加到购物车并结帐。

【解决方案12】：

假设您不能更改输入类型，甚至是 src。你只有有 CSS 可以玩。

如果你知道你想要的高度，并且你有一个你想使用的背景图片的 URL，那么你很幸运。

将高度设置为零，将 padding-top 设置为所需的高度。这会将原始图像推到视线之外，为您提供一个非常干净的空间来显示您的 CSS 背景图像。

它适用于 Chrome。我不知道它是否适用于 Internet Explorer。几乎没有什么聪明的事情，所以可能不会。

#daft {
  height: 0;
  padding-top: 100px;
  width: 100px;
  background-image: url(clever.jpg);
}

&lt;input type="image" src="daft.jpg" id="daft"&gt;

【讨论】：