[css] CSS를 사용하여 입력 버튼 이미지를 변경하는 방법은 무엇입니까?

이미지를 사용하여 입력 버튼을 만들 수 있습니다.

<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를 사용하여 버튼의 스타일을 지정하려면 type = “image”대신 type = “submit”버튼으로 만드십시오. type = “image”는 CSS에서 설정할 수없는 SRC를 예상합니다.

Safari에서는 원하는 방식으로 단추의 스타일을 지정할 수 없습니다. Safari 지원이 필요한 경우 이미지를 배치하고 양식을 제출하는 onclick 기능이 있어야합니다.

답변

<button>태그 를 사용할 수 있습니다 . 제출하려면 간단히 추가하십시오 type="submit". 그런 다음 단추를 그래픽으로 표시하려면 배경 이미지를 사용하십시오.

이렇게 :

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>

추가 정보 : http://htmldog.com/reference/htmltags/button/

답변

HTML

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

CSS

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

Safari에서도 어디서나 작동합니다.

답변

제출 버튼의 CSS 이미지 대체에 대한이 기사 가 도움이 될 수 있습니다.

“이 방법을 사용하면 스타일 시트가 활성화되면 클릭 가능한 이미지가 표시되고 스타일 시트가 꺼져 있으면 표준 버튼이 표시됩니다. 트릭은 이미지 대체 방법을 단추 태그에 적용하고 제출 단추 대신 사용하는 단추입니다. 입력을 사용.

버튼 테두리가 소거되기 때문에, 이는 사용자에게 시각적 팁을 제공하기 때문에, 또한 손으로 버튼을 커서 링크에 사용되는 하나의 모양 변화를 추천합니다. “

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;
}

답변

다음은 더 간단한 솔루션이지만 추가 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/

답변

다음은 Philoye의 솔루션을 약간 수정 한 Internet Explorer에서 나를 위해 일한 것입니다.

>#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;
}

답변

태그에서 blank.gif (1px 투명 이미지)를 대상으로 사용할 수 있습니다

<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;}