제출 버튼에서 값을 투명하게 만드는 방법은 무엇입니까?

Question

양식에 제출 단추가 있고 제출 단추로 배경 이미지를 설정하는 CSS 클래스를 사용합니다. 이 제출 버튼에 값을 주어야하지만, 사용자에게 표시되기를 원하지 않습니다. 내가 투명 CSS 색상 속성을 설정하면 내 파이어 폭스 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

텍스트 들여 쓰기를 사용하면됩니다.

예

:

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> 트릭을해야합니다.