Bộ chọn CSS cho <input type = “?”

Có cách nào với CSS để nhắm mục tiêu tất cả các đầu vào dựa trên loại của chúng không? Tôi có một lớp bị vô hiệu hóa mà tôi sử dụng trên các phần tử biểu mẫu bị vô hiệu hóa khác nhau và tôi đang đặt màu nền cho các hộp văn bản, nhưng tôi không muốn các hộp kiểm của mình có màu đó.

Tôi biết tôi có thể làm điều này với các lớp riêng biệt nhưng tôi muốn sử dụng CSS nếu có thể. Tôi chắc chắn, tôi có thể đặt điều này trong javascript nhưng một lần nữa tìm kiếm CSS.

Tôi đang nhắm mục tiêu IE7 +. Vì vậy, tôi không nghĩ rằng tôi có thể sử dụng CSS3.

Biên tập

Với CSS3, tôi có thể làm điều gì đó như thế nào?

INPUT[type='text']:disabled Điều đó thậm chí sẽ tốt hơn nếu loại bỏ hoàn toàn lớp học của tôi ...

Biên tập

Ok, cảm ơn vì sự giúp đỡ! Vì vậy, đây là một bộ chọn sửa đổi tất cả các hộp văn bản và các khu vực đã bị vô hiệu hóa mà không yêu cầu thiết lập bất kỳ lớp nào, khi tôi bắt đầu câu hỏi này, tôi chưa bao giờ nghĩ điều này có thể xảy ra ...

INPUT[disabled][type='text'], TEXTAREA[disabled]
{   
    background-color: Silver;
}

Điều này hoạt động trong IE7

Đúng. IE7 + hỗ trợ các bộ chọn thuộc tính:

input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]

Đầu vào phần tử có kiểu thuộc tính chứa giá trị bằng, bắt đầu bằng, chứa hoặc kết thúc bằng một giá trị nhất định.

Các bộ chọn an toàn khác (IE7 +) là:

• Parent> child có: p > span { font-weight: bold; }
• Trước phần tử ~ là: span ~ span { color: blue; }

Cái nào <p><span/><span/></p>sẽ mang lại hiệu quả cho bạn:

<p>
    <span style="font-weight: bold;">
    <span style="font-weight: bold; color: blue;">
</p>

Đọc thêm: Khả năng tương thích CSS của trình duyệt trên quirksmode.com

Tôi ngạc nhiên là những người khác nghĩ rằng nó không thể được thực hiện. Các bộ chọn thuộc tính CSS đã ở đây một thời gian rồi. Tôi đoán đã đến lúc chúng ta dọn dẹp các tệp .css của mình.

Đáng buồn thay, các áp phích khác đều đúng rằng bạn ... thực sự như đã được sửa chữa bởi kRON, bạn ổn với IE7 và một tài liệu nghiêm ngặt, nhưng hầu hết chúng ta với các yêu cầu của IE6 được giảm xuống thành JS hoặc tham chiếu lớp cho điều này, nhưng nó là thuộc tính CSS2, chỉ một thuộc tính mà không có sự hỗ trợ đầy đủ từ trình duyệt IE ^ h ^ h.

Ngoài tính hoàn chỉnh, bộ chọn kiểu - tương tự như xpath - có dạng [attribute=value]nhưng tồn tại nhiều biến thể thú vị. Nó sẽ khá mạnh khi có sẵn, điều tốt là bạn nên lưu ý đến IE8.

• tham chiếu w3

• tham chiếu hỗ trợ trình duyệt

Bạn có thể làm điều này với jQuery. Sử dụng bộ chọn của họ, bạn có thể chọn theo thuộc tính, chẳng hạn như loại. Tuy nhiên, điều này yêu cầu người dùng của bạn phải bật Javascript và một tệp bổ sung để tải xuống, nhưng nếu nó hoạt động ...

Xin lỗi, câu trả lời ngắn gọn là không. CSS (2.1) sẽ chỉ đánh dấu các phần tử của DOM, không đánh dấu các thuộc tính của chúng. Bạn phải áp dụng một lớp cụ thể cho mỗi đầu vào.

Tôi biết thật tệ, bởi vì điều đó sẽ vô cùng hữu ích.

Tôi biết bạn đã nói rằng bạn thích CSS hơn JavaScript, nhưng bạn vẫn nên cân nhắc sử dụng jQuery. Nó cung cấp một cách rất rõ ràng và trang nhã để thêm kiểu vào các phần tử DOM dựa trên các thuộc tính.