CSS 分别设置表单图像按钮的样式？答案

【问题标题】：CSS styling an form image button, separately?CSS 分别设置表单图像按钮的样式？
【发布时间】：2012-02-14 22:28:04
【问题描述】：

我想为我的表单中的图像按钮设置单独的样式，这样它们就不会像我的其他输入元素那样具有白色背景。

这是一个我想要单独样式的元素：

<input id="confirm_quote" width="60" type="image" height="60" name="confirm_quote" src="img/go.png">

这是所有输入元素的默认样式：

    input
{
    background-color: #fff;
}

我想要一个单独的输入按钮样式。

我尝试了以下方法，但它们不起作用：

    input.button.image
{
    background: none;
}

和

    input.image
{
    background: none;
}

和

input image
{
    background: none;
}

似乎没有一个工作。

有什么想法吗？或解释为什么这不起作用？

【问题讨论】：

你试过了吗？ : #confirm_quote { 背景：无； }
谢谢，但这仅适用于一个图像按钮，我的整个网站上大约有 20 个。所以我必须为每个人都这样做:(
然后你必须为你的按钮添加一个类。你也可以试试 Chris 的回答。

标签： html css forms button

【解决方案1】：

input[type="image"] {
    background: transparent;
}

应该这样做......

【讨论】：

谢谢你，你能给我解释一下这个语法吗
它将简单地定位所有在其属性“type”中具有值“image”的输入元素。您可以使用任何您喜欢的属性来获得相同的结果。您也可以使用一些不同的变体 (see MDN reference)。

【解决方案2】：

你必须试试这个 css。

input[type=image]
{
background-image:your-image path;
width-size;
height-size;
background-repeat:no-repeat;
background-color:transparent;
border:0px;
}

【讨论】：