2012-08-17 55 views
6

Tôi muốn nút nhập = loại của tôi chỉ thay đổi màu khi được bấm. Ví dụ, nếu tôi có một nút màu trắng, tôi muốn nó trở thành màu xanh lá cây chỉ trong khi nhấn, và khi nó không ép nữa tôi muốn nó trở lại màu trắng. Làm thế nào tôi có thể làm điều này trong HTML và Javascript? (Xin lỗi cho tiếng Anh xấu của tôi và cảm ơn bạn)Nút loại đầu vào thay đổi màu trong khi nhấn?

Trả lời

5

bộ chọn CSS cho trạng thái này được gọi là :active

Vì vậy, nếu bạn làm:

input.btn:active { background:green }

nên hoạt động.

Xem demo

+0

Điều này chỉ hoạt động với chuột. – xdazz

+1

Dường như không hoạt động trong IE? –

+0

@Trekstuff mà IE? Đối với các phần tử không phải là nó chỉ được hỗ trợ trong IE từ phiên bản 8.0: https://developer.mozilla.org/en-US/docs/CSS/:active. –

1

Plain vanilla HTML + JavaSctipt:

<input type="button" style="background-color:white" value="Click Me" onmousedown="this.style.background='green'" onmouseup="this.style.background='white'" /> 

Demo: http://jsfiddle.net/bqjzq/

+1

Tại sao bạn làm javascript, đặc biệt. javascript nội tuyến cho một cái gì đó như thế này nếu bạn có thể làm điều đó với CSS? –

+0

Xem nhận xét của tôi về giải pháp Piotr bên dưới. CSS tinh khiết cho nút nhập không hoạt động trong IE. Và JS nội tuyến là chỉ cho ví dụ, tất nhiên nếu một hàm phức tạp hơn là cần thiết, nó phải là một hàm. Dù sao CSS tinh khiết workd cho phần tử

+0

Tôi muốn tìm một giải pháp mà nó cũng hoạt động nếu bạn nhả chuột ngoài mục tiêu –

1

Đối với tôi nó chỉ làm việc với:

<style> 
input:active{ background-color:green} 
</style> 

lựa chọn khác là spec ify khi di chuột qua, chỉ dành cho các nút:

<style> 
input[type=button]:hover{ background-color: #46000D} 
<style> 
Các vấn đề liên quan