Làm cách nào để thay đổi hình ảnh nút đầu vào bằng CSS?

Vì vậy, tôi có thể tạo nút nhập bằng hình ảnh bằng cách sử dụng

<INPUT type="image" src="/images/Btn.PNG" value="">

Nhưng, tôi không thể có hành vi tương tự bằng CSS. Chẳng hạn, tôi đã thử

<INPUT type="image" class="myButton" value="">

trong đó "myButton" được định nghĩa trong tệp CSS là

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

Nếu đó là tất cả những gì tôi muốn làm, tôi có thể sử dụng kiểu gốc, nhưng tôi muốn thay đổi giao diện của nút khi di chuột (sử dụng một myButton:hoverlớp). Tôi biết các liên kết là tốt, vì tôi đã có thể tải chúng cho hình nền cho các phần khác của trang (giống như một kiểm tra). Tôi đã tìm thấy các ví dụ trên web về cách thực hiện bằng JavaScript, nhưng tôi đang tìm giải pháp CSS.

Tôi đang sử dụng Firefox 3.0.3 nếu điều đó tạo ra sự khác biệt.

Nếu bạn muốn tạo kiểu cho nút bằng CSS, hãy đặt nó thành nút type = "submit" thay vì type = "image". type = "image" mong đợi SRC mà bạn không thể đặt trong CSS.

Lưu ý rằng Safari sẽ không cho phép bạn tạo kiểu cho bất kỳ nút nào theo cách bạn đang tìm kiếm. Nếu bạn cần hỗ trợ Safari, bạn sẽ cần đặt một hình ảnh và có chức năng onclick để gửi biểu mẫu.

Bạn có thể sử dụng <button>thẻ. Để gửi, chỉ cần thêmtype="submit" . Sau đó sử dụng hình nền khi bạn muốn nút xuất hiện dưới dạng đồ họa.

Thích như vậy:

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

Thông tin thêm: http://htminois.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;
}

Điều này sẽ hoạt động ở bất cứ đâu, ngay cả trong Safari.

Bài viết này về thay thế hình ảnh CSS cho các nút gửi có thể giúp đỡ.

"Sử dụng phương pháp này, bạn sẽ có được một hình ảnh có thể nhấp khi các biểu định kiểu được kích hoạt và một nút tiêu chuẩn khi các biểu định kiểu bị tắt. Mẹo nhỏ là áp dụng các phương pháp thay thế hình ảnh cho thẻ nút và sử dụng nó làm nút gửi, thay vì bằng cách sử dụng đầu vào.

Và vì các đường viền nút bị xóa, nên thay đổi con trỏ nút thành bàn tay hình được sử dụng cho các liên kết, vì điều này cung cấp một mẹo trực quan cho người dùng. "

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

Đây là một giải pháp đơn giản hơn nhưng không có thêm div xung quanh:

<input type="submit" value="Submit">

CSS sử dụng một kỹ thuật thay thế hình ảnh cơ bản. Đối với điểm thưởng, nó hiển thị bằng cách sử dụng một sprite hình ảnh:

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

Nguồn: http://work.around.org/su/21/USE-css-sprites-with-input-type-submit-buttons/

Đây là những gì làm việc cho tôi trên Internet Explorer, một sửa đổi nhỏ cho giải pháp của 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;
}

Bạn có thể sử dụng blank.gif (hình ảnh trong suốt 1px) làm mục tiêu trong thẻ của bạn

<input type="image" src="img/blank.gif" class="button"> 

và sau đó tạo kiểu nền trong 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;}

Một biến thể về các câu trả lời trước. Tôi thấy rằng độ mờ cần phải được thiết lập, tất nhiên điều này sẽ hoạt động trong IE6 trở đi. Có một vấn đề với giải pháp chiều cao dòng trong IE8 khi nút không phản hồi. Và với điều này, bạn cũng có được một con trỏ tay!

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

Tôi nghĩ sau đây là giải pháp tốt nhất:

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

Giải pháp của tôi không có js và không có hình ảnh là đây:

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

Có lẽ bạn chỉ có thể nhập tệp .js và có hình ảnh thay thế ở đó, bằng JavaScript.

Giả sử bạn không thể thay đổi loại đầu vào, hoặc thậm chí là src. Bạn CHỈ có css để chơi với.

Nếu bạn biết chiều cao bạn muốn và bạn có url của hình nền bạn muốn sử dụng thay vào đó, bạn thật may mắn.

Đặt chiều cao thành 0 và đệm trên cùng với chiều cao bạn muốn. Điều đó sẽ đẩy hình ảnh gốc ra khỏi tầm nhìn, mang lại cho bạn một không gian hoàn toàn sạch sẽ để hiển thị hình nền css của bạn.

Hoạt động trong Chrome. Không có ý tưởng nếu nó hoạt động trong IE. Không có gì thông minh cả, nên có lẽ là không.

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

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