Bộ chọn CSS cho loại đầu vào bị vô hiệu hóa = “submit”

Có bộ chọn CSS nào cho bị vô hiệu hóa input type="submit"hay "button"không?

Tôi có nên sử dụng input[type="submit"][disabled]không?

Điều đó có hoạt động trong IE6 không?

css css-selectors submit-button

— Francisc
nguồn

:disabledcó thể tốt hơn, trong CSS3. Tuy nhiên IE cũng không hỗ trợ nên bạn sẽ cần một lớp dự phòng.

— bobince

Cảm ơn, điểm tốt, nhưng tôi dự định tránh xa CSS3 ngay bây giờ.

— Francisc

Các nhà phát triển thực sự cần ngừng cố gắng hỗ trợ IE6. Và chủ sở hữu / người quản lý trang web thực sự cần ngừng yêu cầu các nhà phát triển hỗ trợ nó. Cố lên mọi người - IE9 sắp ra mắt!

— Spudley

Chà, khi xem xét 24% người dùng của khách hàng của tôi đến từ IE6, tôi không thể bỏ qua nó lúc này. IE9 rất tuyệt, nhưng nó không hoạt động trên Windows XP.

— Francisc

24% là trên mức trung bình cho IE6 những ngày này, nhưng có nếu bạn có loại chỉ số đó bạn cần phải đối phó. Không có nghĩa là bạn phải làm cho mọi thứ trông hoàn hảo trong đó, miễn là chức năng hoạt động. Đối với những gì nó đáng giá, chúng tôi đang thấy khoảng 17% và chúng tôi đã đưa ra quyết định tích cực bỏ hỗ trợ cho nó trong lần cải tạo trang web sắp tới của chúng tôi.

— Spudley

Câu trả lời:

114

Điều đó có hoạt động trong IE6 không?

Không, IE6 hoàn toàn không hỗ trợ bộ chọn thuộc tính , cf. Khả năng tương thích CSS và Internet Explorer .

Bạn có thể tìm thấy Cách giải quyết: IE6 không hỗ trợ các bộ chọn CSS "thuộc tính" đáng để đọc.

BIÊN TẬP
Nếu bạn định bỏ qua IE6, bạn có thể làm (CSS2.1):

input[type=submit][disabled=disabled],
button[disabled=disabled] {
    ...
}

CSS3 (IE9 +):

input[type=submit]:disabled,
button:disabled {
    ...
}

Bạn có thể thay thế [disabled=disabled](giá trị thuộc tính) bằng [disabled](sự hiện diện thuộc tính).

— jensgram
nguồn

Ok, cảm ơn bạn. Nhưng nếu tôi bỏ qua IE6, làm thế nào điều đó sẽ được thực hiện? Đầu vào [type = "button" [bị tắt] có chuẩn không?

— Francisc

Một lần nữa, cảm ơn vì liên kết đầu tiên, Khả năng tương thích CSS và Internet Explorer - BÀI VIẾT TUYỆT VỜI, đánh dấu tức thì.

— Francisc

@SuperUberDuper Cách tiếp cận dựa trên thuộc tính sẽ hoạt động trong IE8 (không phải IE6 hay IE9 +). Cả IE7 và IE8 đều hỗ trợ một số bộ chọn CSS2.1 và CSS3, giá trị / sự hiện diện thuộc tính là một trong số đó.

— jensgram

Như đã nói bởi jensgram, IE6 không hỗ trợ bộ chọn thuộc tính. Bạn có thể thêm class = "vô hiệu hóa" để chọn các đầu vào bị vô hiệu hóa để điều này có thể hoạt động trong IE6.

— Tim
nguồn

Tôi đã sử dụng giải pháp @jensgram để ẩn một div chứa đầu vào bị vô hiệu hóa. Vì vậy, tôi ẩn toàn bộ cha của đầu vào.

Đây là mã:

div:has(>input[disabled=disabled]) {
    display: none;
}

Có lẽ nó có thể giúp một số bạn.

— Meloman
nguồn