Tạo kiểu đầu vào bị tắt bằng css chỉ

Question

Tôi có một tình huống lạ. Tôi đang cố gắng để phong cách một nút đầu vào bị vô hiệu hóa bởi vì tôi có một hover gây phiền nhiễu chuyển văn bản sang màu trắng. Điều này khiến người dùng bối rối vì hành động của nó giống như nút thông thường.

Tôi đã thử một vài điều, chủ yếu là css và một vài thứ jQuery. Tôi muốn giữ điều này trong css nếu ở tất cả posable.

Đây là html của tôi, xin lỗi vì nó nằm trong trình trợ giúp biểu mẫu ấu trùng.

{{ Form::submit('Change', array_merge($design_project->is_locked ? ['disabled' => 'disabled'] : [], ['class' => 'btn btn-blue span3'])) }} 

và đây là những gì các trình duyệt tạo ra

<input disabled="disabled" class="btn btn-blue span3" type="submit" value="Change"> 

và tôi đã làm việc trên một cái gì đó như thế này

.btn:hover input[disabled], .btn:active input[disabled], .btn:focus input[disabled]{ 
    color:green 
} 

Bất kỳ trợ giúp sẽ là tuyệt vời!

Answer 1

Sử dụng CSS này (jsFiddle example):

input:disabled.btn:hover, 
input:disabled.btn:active, 
input:disabled.btn:focus { 
    color: green 
} 

Bạn phải viết các yếu tố bên ngoài hầu hết ở bên trái và các yếu tố bên trong hầu hết các bên phải.

.btn:hover input:disabled sẽ chọn bất kỳ yếu tố đầu vào bị vô hiệu nào có trong phần tử có lớp btn hiện đang được người dùng di chuột.

Tôi muốn :disabled qua [disabled], xem câu hỏi này cho một cuộc thảo luận: Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?

---

Bằng cách này, Laravel (PHP) tạo ra HTML - không phải là trình duyệt.

Answer 2

Một khoảng trống trong bộ chọn CSS chọn các phần tử con.

.btn input 

này về cơ bản là những gì bạn đã viết và nó sẽ chọn <input> yếu tố bên trong bất kỳ yếu tố nào có lớp btn.

Tôi nghĩ rằng bạn đang tìm kiếm

input[disabled].btn:hover, input[disabled].btn:active, input[disabled].btn:focus 

này sẽ chọn <input> yếu tố với disabled thuộc tính và lớp btn trong ba trạng thái khác nhau của hover, active và focus.

Answer 3

Hãy chỉ nói rằng bạn có 3 nút:

<input type="button" disabled="disabled" value="hello world"> 
<input type="button" disabled value="hello world"> 
<input type="button" value="hello world"> 

Để tạo kiểu cho nút khuyết tật bạn có thể sử dụng css sau:

input[type="button"]:disabled{ 
    color:#000; 
} 

này sẽ chỉ ảnh hưởng đến nút đó bị vô hiệu hóa.

Để ngăn chặn sự thay đổi màu sắc khi lơ lửng bạn có thể sử dụng điều này quá:

input[type="button"]:disabled:hover{ 
    color:#000; 
} 

Bạn cũng có thể tránh điều này bằng cách sử dụng một css-reset.