วิธีการเปลี่ยนรูปปุ่มอินพุตโดยใช้ 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 = "submit" แทนที่จะเป็น type = "image" type = "image" ต้องการ SRC ซึ่งคุณไม่สามารถตั้งค่าใน CSS

โปรดทราบว่า 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/

นี่คือสิ่งที่ใช้ได้กับฉันใน Internet Explorer ซึ่งเป็นวิธีการแก้ไขเล็กน้อยโดย Philoye

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

รูปแบบของคำตอบก่อนหน้า ฉันพบว่าต้องตั้งค่าความทึบแน่นอนว่ามันจะใช้ได้ใน IE6 และต่อไป มีปัญหากับการแก้ปัญหาความสูงบรรทัดใน IE8 ซึ่งปุ่มจะไม่ตอบสนอง และด้วยสิ่งนี้คุณจะได้เคอร์เซอร์มือเช่นกัน!

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

โซลูชันของฉันที่ไม่มี js และไม่มีรูปคือ:

* 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 เช่นกันและเปลี่ยนรูปภาพใน JavaScript

สมมติว่าคุณไม่สามารถเปลี่ยนประเภทอินพุตหรือแม้แต่ src ได้ คุณมี CSS เพื่อเล่นกับเท่านั้น

หากคุณทราบความสูงที่คุณต้องการและคุณมี URL ของภาพพื้นหลังที่คุณต้องการใช้แทนคุณจะโชคดี

ตั้งความสูงเป็นศูนย์และเติมด้านบนเป็นความสูงที่คุณต้องการ นั่นจะทำให้ภาพต้นฉบับหลุดออกไปทำให้คุณมีพื้นที่สะอาดสมบูรณ์แบบเพื่อแสดงภาพพื้นหลัง css ของคุณ

ทำงานได้ใน Chrome ไม่ทราบว่าทำงานใน IE หรือไม่ สิ่งที่ฉลาดแทบจะไม่ทำดังนั้นอาจไม่

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

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