Làm thế nào để định kiểu thuộc tính chỉ đọc với CSS?

Tôi hiện đang sử dụng readonly = "readonly" để tắt các trường. Bây giờ tôi đang cố gắng định kiểu thuộc tính bằng CSS. Tôi đã thử sử dụng

input[readonly] {
/*styling info here*/
}

nhưng nó không hoạt động vì một số lý do. Tôi cũng đã thử

input[readonly='readonly'] {
/*styling info here*/
}

điều đó cũng không hoạt động.

Làm cách nào để tạo kiểu thuộc tính chỉ đọc bằng CSS?

input[readonly]
{
    background-color:blue;
}

https://curtistimson.co.uk/post/css/style-readonly-attribution-css/

Lưu ý rằng nó textarea[readonly="readonly"]hoạt động nếu bạn đặt readonly="readonly"trong HTML nhưng nó KHÔNG hoạt động nếu bạn đặt readOnly-attribution thành truehoặc "readonly"thông qua JavaScript.

Để bộ chọn CSS hoạt động nếu bạn đặt readOnlybằng JavaScript, bạn phải sử dụng bộ chọn textarea[readonly].

Hành vi tương tự trong Firefox 14 và Chrome 20.

Để an toàn, tôi sử dụng cả hai bộ chọn.

textarea[readonly="readonly"], textarea[readonly] {
...
}

Để an toàn, bạn có thể muốn sử dụng cả ...

input[readonly], input[readonly="readonly"] {
    /*styling info here*/
}

Thuộc tính readonly là "thuộc tính boolean", có thể để trống hoặc "readonly" (các giá trị hợp lệ duy nhất). http://www.whatwg.org/specs/web-apps/civerse-work/#boolean-attribution

Nếu bạn đang sử dụng một cái gì đó như .prop('readonly', true)chức năng của jQuery , cuối cùng bạn sẽ cần [readonly], trong khi nếu bạn đang sử dụng .attr("readonly", "readonly")thì bạn sẽ cần [readonly="readonly"].

Sửa chữa: Bạn chỉ cần sử dụng input[readonly]. Bao gồm input[readonly="readonly"]là dư thừa. Xem https://stackoverflow.com/a/19645203/1766230

Vô số câu trả lời ở đây, nhưng chưa thấy câu trả lời tôi sử dụng:

input[type="text"]:read-only { color: blue; }

Lưu ý dấu gạch ngang trong bộ chọn giả. Nếu đầu vào là readonly="false"nó cũng sẽ bắt được vì bộ chọn này bắt được sự hiện diện của chỉ đọc bất kể giá trị. Về mặt kỹ thuật falselà không hợp lệ theo thông số kỹ thuật, nhưng internet không phải là một thế giới hoàn hảo. Nếu bạn cần bao gồm trường hợp đó, bạn có thể làm điều này:

input[type="text"]:read-only:not([read-only="false"]) { color: blue; }

textarea hoạt động theo cùng một cách:

textarea:read-only:not([read-only="false"]) { color: blue; }

Hãy ghi nhớ rằng html bây giờ hỗ trợ không chỉ type="text", nhưng một loạt các loại văn bản khác một ví dụ number, tel, email, date, time, url, vv Mỗi sẽ cần phải được bổ sung vào bộ chọn.

Có một số cách để làm điều này.

Đầu tiên là sử dụng rộng rãi nhất. Nó hoạt động trên tất cả các trình duyệt chính.

input[readonly] {
 background-color: #dddddd;
}

Mặc dù cái ở trên sẽ chọn tất cả các đầu vào có readonlyđính kèm, nhưng cái dưới đây sẽ chỉ chọn những gì bạn mong muốn. Đảm bảo thay thế demobằng bất kỳ loại đầu vào nào bạn muốn.

input[type="demo"]:read-only {
 background-color: #dddddd;
}

Đây là một thay thế cho lần đầu tiên, nhưng nó không được sử dụng nhiều:

input:read-only {
 background-color: #dddddd;
}

Bộ :read-onlychọn được hỗ trợ trong Chrome, Opera và Safari. Firefox sử dụng :-moz-read-only. IE không hỗ trợ :read-onlybộ chọn.

Bạn cũng có thể sử dụng input[readonly="readonly"], nhưng điều này khá giống với input[readonly]kinh nghiệm của tôi.

input[readonly], input:read-only {
    /* styling info here */
}

Shoud bao gồm tất cả các trường hợp cho một trường nhập chỉ đọc ...

viết hoa chữ cái đầu tiên của Only

input[readOnly] {
      background: red !important;
    }

<input type="text" name="country" value="China" readonly="readonly" />

Nếu bạn chọn đầu vào theo id và sau đó thêm input[readonly="readonly"]thẻ vào css, đại loại như:

 #inputID input[readonly="readonly"] {
     background-color: #000000;
 }

Rằng sẽ không làm việc. Bạn phải chọn một lớp cha hoặc id sau đó là đầu vào. Cái gì đó như:

 .parentClass, #parentID input[readonly="readonly"] {
     background-color: #000000;
 }

2 xu của tôi trong khi chờ vé mới tại nơi làm việc: D

Sử dụng như sau để làm việc trong tất cả các trình duyệt:

 var readOnlyAttr = $('.textBoxClass').attr('readonly');
    if (typeof readOnlyAttr !== 'undefined' && readOnlyAttr !== false) {
        $('.textBoxClass').addClass('locked');
    }