Question

我在表单中有一个提交按钮，我使用一个css类，它将背景图像设置为提交按钮。我需要为此提交按钮赋值，但我不希望它显示给用户。如果我将css颜色属性设置为透明，它在我的Firefox 3.6中工作正常。但是值显示在6和7中。我怎样才能解决这个问题？

<div  id="upldTempForm" class="pgcontent">
  <form>
    <div style="text-align:center;">
      <input type="submit" name="create" value="" class="save" />
      <input type="button" name="cancel" value="" class="cancel"/>
    </div>
  </form>
</div>

css

.pgcontent {
    background-color:#ECECEC;
    border:2px solid #E7E7E7;
    margin:30px auto;
    width:820px;
    font-size:12px;
}

.save{
    background-image:url("../images/save.gif");
    background-repeat:no-repeat;
    width:100px;
    height:40px;
    cursor:pointer;
    background-color:transparent;
    border:none;    
}

.cancel{
    background-image:url("../images/cancel.gif");
    background-repeat:no-repeat;
    width:110px;
    height:40px;
    cursor:pointer;
    background-color:transparent;
    border:none;
}

Answer 1

使用text-indent将起作用。

示例：

INPUT[type=button], INPUT[type=submit]
{
    font-weight: bold;

    color: #000000;

    text-indent: -99999px;
    text-align: center;

    background-color: Transparent;
    background-image: url(../images/button.png);
    background-repeat: no-repeat;

    cursor: pointer;
}

在nailxx的评论之后做了一些小的研究。 IE是一个交易破坏者（再次）。

对于IE添加：

font-size: 0;   
display: block; 
line-height: 0;

<强>解决方案

<div  id="upldTempForm" class="pgcontent">
<form>
    <div>
        <input type="submit" name="create" value="Create" class="save" />
        <input type="button" name="cancel" value="Cancel" class="cancel"/>
    </div>
</form>
</div>

css

.pgcontent 
{
    background-color:#ECECEC;
    border:2px solid #E7E7E7;
    margin:30px auto;
    width:820px;
    font-size:12px;
    text-align:center;
}

.save
{
    background-image:url("../images/save.gif");
    background-repeat:no-repeat;
    width:100px;
    height:40px;
    cursor:pointer;
    background-color:transparent;
    border:none;    

    line-height: 100;
    overflow: hidden;
}

.cancel
{
    background-image:url("../images/cancel.gif");
    background-repeat:no-repeat;
    width:110px;
    height:40px;
    cursor:pointer;
    background-color:transparent;
    border:none;

    line-height: 100;
    overflow: hidden;
}

Answer 2

你应该尝试使用而不是在这种情况下。

<button type="submit" name="aa" value="asdf"> <img src="http://www.w3schools.com/images/compatible_safari.gif"/> </button> 应该这样做。

如何使提交按钮中的值透明？

2 个答案: