CSS로 읽기 전용 속성의 스타일을 지정하는 방법은 무엇입니까?

현재 필드를 비활성화하기 위해 readonly = "readonly"를 사용하고 있습니다. CSS를 사용하여 속성의 스타일을 지정하려고합니다. 나는 사용을 시도했다

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

그러나 어떤 이유로 작동하지 않습니다. 나는 또한 시도했다

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

그것은 작동하지 않습니다.

CSS로 읽기 전용 속성의 스타일을 어떻게 지정할 수 있습니까?

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

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

참고 textarea[readonly="readonly"]사용자가 설정 한 경우 작업 readonly="readonly"HTML에 있지만 설정하는 경우가 작동하지 않습니다 readOnly에 -attribute를 true하거나 "readonly"자바 스크립트를 통해.

JavaScript로 설정 readOnly한 경우 CSS 선택기가 작동 하려면 선택기를 사용해야합니다 textarea[readonly].

Firefox 14 및 Chrome 20에서 동일한 동작입니다.

안전을 위해 두 선택기를 모두 사용합니다.

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

안전을 위해 두 가지를 모두 사용할 수 있습니다 ...

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

읽기 전용 속성은 "부울 속성"이며, 공백 또는 "읽기 전용"(유일한 유효한 값) 일 수 있습니다. http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

jQuery의 .prop('readonly', true)기능 과 같은 것을 사용하면을 필요 [readonly]로하는 반면을 사용 .attr("readonly", "readonly")하면을 필요로합니다 [readonly="readonly"].

수정 : 을 사용해야 input[readonly]합니다. 포함 input[readonly="readonly"]은 중복입니다. 참조 https://stackoverflow.com/a/19645203/1766230를

여기에 많은 답변이 있지만 내가 사용하는 답변을 보지 못했습니다.

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

의사 선택기에서 대시를 유의하십시오. readonly="false"이 선택기는 값에 관계없이 읽기 전용의 존재를 포착하기 때문에 입력 도 마찬가지입니다. false사양에 따르면 기술적으로 는 유효하지 않지만 인터넷은 완벽한 세상이 아닙니다. 해당 사례를 다루어야 할 경우 다음을 수행 할 수 있습니다.

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

textarea 같은 방식으로 작동합니다.

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

HTML은 지금뿐만 아니라 지원하는 것을 명심 type="text"하지만, 같은 다른 텍스트 유형의 슬루 number, tel, email, date, time, url각 필요한 것 등은 선택에 추가 할 수 있습니다.

이를 수행하는 몇 가지 방법이 있습니다.

첫 번째가 가장 널리 사용됩니다. 모든 주요 브라우저에서 작동합니다.

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

위의 내용은 readonly연결된 모든 입력을 선택하지만 아래의 내용은 원하는 항목 만 선택합니다. demo원하는 입력 유형 으로 교체하십시오 .

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

이것은 첫 번째 대안이지만 많이 사용되지는 않습니다.

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

:read-only선택은 크롬, 오페라, 사파리에서 지원됩니다. Firefox는을 사용합니다 :-moz-read-only. IE는 :read-only선택기를 지원하지 않습니다 .

당신은 또한 사용할 수 input[readonly="readonly"]있지만 이것은 input[readonly]내 경험에서 와 거의 동일 합니다.

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

읽기 전용 입력 필드에 대한 모든 경우 를 포함 해야합니다 ...

만의 첫 글자를 대문자로

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

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

ID로 입력을 선택한 다음 input[readonly="readonly"]CSS에 태그 를 추가하면 다음과 같습니다.

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

작동하지 않습니다. 부모 클래스를 선택하거나 ID를 입력 한 다음 입력해야합니다. 다음과 같은 것 :

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

직장에서 새 티켓을 기다리는 동안 내 2 센트 : D

모든 브라우저에서 작동하려면 다음을 사용하십시오.

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