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

그게 전부라면 원래 스타일을 사용할 수도 있지만, 호버에서 버튼 모양을 변경하고 싶습니다(a 사용).myButton:hover급).링크가 좋다는 것을 알고 있습니다. 왜냐하면 저는 링크를 페이지의 다른 부분에 대한 배경 이미지로 로드할 수 있었기 때문입니다(체크 차원에서).웹상에서 자바스크립트를 이용한 방법에 대한 예시를 찾았는데 CSS 솔루션을 찾고 있습니다.

차이가 있다면 파이어폭스 3.0.3을 사용하고 있습니다.

CSS를 사용하여 버튼을 스타일링하려면 type="image" 대신 type="float" 버튼으로 만듭니다.type="image"는 CSS에서 설정할 수 없는 SRC를 예상합니다.

Safari는 사용자가 원하는 방식으로 버튼을 스타일링 할 수 없습니다.Safari 지원이 필요한 경우 이미지를 배치하고 양식을 제출하는 on-click 기능이 필요합니다.

사용할 수 있습니다.<button>tag. submit의 경우 추가하기만 하면 됩니다.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>

더 많은 정보

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에서도 작동합니다.

제출 버튼에 대한 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;
}

여기에 더 간단한 해결책이 있지만 추가적인 주변 기능이 없습니다.

<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(1픽셀 투명 이미지)를 대상으로 사용할 수 있습니다.

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

이전 답변의 변형:

불투명도를 설정해야 합니다. 물론 Internet Explorer 6(인터넷 익스플로러 6) 이상에서도 작동합니다.Internet Explorer 8의 선 높이 솔루션에서 버튼이 반응하지 않는 문제가 발생했습니다.그리고 이것으로 손 커서도 얻을 수 있습니다!

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

저는 다음이 최선의 해결책이라고 생각합니다.

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" />

자바스크립트가 없고 이미지가 없는 제 솔루션은 다음과 같습니다.

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

아마도 당신은 .js 파일을 가져와서 자바스크립트로 이미지를 대체할 수 있을 것입니다.

입력 유형이나 src조차 변경할 수 없다고 가정합니다.가지고 놀 수 있는 CSS만 있습니다.

원하는 높이를 알고, 대신 사용하고 싶은 배경 이미지의 URL을 가지고 있다면 행운입니다.

높이를 0으로 설정하고 패딩톱을 원하는 높이로 설정합니다.그러면 원래 이미지가 보이지 않게 되어 CSS 배경 이미지를 보여줄 수 있는 완벽한 공간이 제공됩니다.

크롬에서 작동합니다.인터넷 익스플로러에서 작동하는지 전혀 모르겠습니다.영리한 일은 거의 없으니 아마 아닐 겁니다.

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

<input type="image" src="daft.jpg" id="daft">

언급URL : https://stackoverflow.com/questions/195632/how-to-change-an-input-button-image-using-css