Salt okunur özniteliği CSS ile nasıl şekillendirebilirim?

Şu anda alanları devre dışı bırakmak için readonly = "readonly" kullanıyorum. Şimdi öznitelik CSS kullanarak stil çalışıyorum. Kullanmayı denedim

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

ama bir sebepten dolayı çalışmıyor. Ben de denedim

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

bu da işe yaramıyor.

Salt okunur özniteliği CSS ile nasıl biçimlendirebilirim?

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

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

Not olduğunu textarea[readonly="readonly"]ayarladığınız takdirde eserler readonly="readonly"HTML ancak ayarlamış eğer çalışmazsa readOnlyiçin -attribute trueveya "readonly"JavaScript aracılığıyla.

JavaScript ile ayarlarsanızreadOnly CSS seçicinin çalışması için seçiciyi kullanmanız gerekir textarea[readonly].

Firefox 14 ve Chrome 20'de aynı davranış.

Güvenli tarafta olmak için her iki seçiciyi de kullanıyorum.

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

Güvende olmak için her ikisini de kullanmak isteyebilirsiniz ...

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

Salt okunur özniteliği, boş veya "salt okunur" (yalnızca geçerli değerler) olabilen bir "boole özniteliğidir". http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

Eğer jQuery .prop('readonly', true)işlevi gibi bir şey kullanıyorsanız , ihtiyacınız olacak [readonly], eğer kullanıyorsanız .attr("readonly", "readonly")o zaman ihtiyacınız olacak [readonly="readonly"].

Düzeltme: Yalnızca kullanmanız gerekir input[readonly]. Dahil olmak input[readonly="readonly"]gereksizdir. Bkz. Https://stackoverflow.com/a/19645203/1766230

Burada bir sürü cevap var, ama kullandığımı görmedim:

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

Sahte seçicideki tireye dikkat edin. Girdi ise, readonly="false"bu seçici değerden bağımsız olarak salt okunur varlığı yakaladığından bunu da yakalar. Teknik falseözelliklere göre geçersizdir, ancak internet mükemmel bir dünya değildir. Bu vakayı kapsamanız gerekiyorsa, bunu yapabilirsiniz:

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

textarea aynı şekilde çalışır:

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

Html artık sadece desteklediğini unutmayın type="text", ancak bu tür bir diğer metinsel türlerinin yetişme number, tel, email, date, time, urlHer gerekir vs. seçicinin eklenecek.

Bunu yapmanın birkaç yolu var.

Birincisi en yaygın kullanılanıdır. Tüm büyük tarayıcılarda çalışır.

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

Yukarıdakiler readonlyekli olan tüm girişleri seçecek olsa da , aşağıdaki giriş sadece istediğinizi seçecektir. demoİstediğiniz giriş türüyle değiştirdiğinizden emin olun .

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

Bu birinciye alternatif, ancak çok fazla kullanılmıyor:

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

:read-onlySeçici Krom, Opera ve Safari desteklenir. Firefox kullanır :-moz-read-only. IE :read-onlyseçiciyi desteklemiyor .

Ayrıca kullanabilirsiniz input[readonly="readonly"], ancak bu input[readonly]benim deneyimim ile hemen hemen aynı .

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

Salt okunur bir giriş alanı için tüm durumları kapsamalıdır ...

Yalnızca ilk harfini büyük yaz

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

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

Girdiyi id ile seçer ve sonra input[readonly="readonly"]etiketi css'e eklerseniz , şöyle bir şey:

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

Bu işe yaramayacak. Bir üst sınıf veya kimlik ve ardından girdiyi seçmeniz gerekir. Gibi bir şey:

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

İş yerinde yeni biletler beklerken 2 sentim: D

Tüm tarayıcılarda çalışmak için aşağıdakileri kullanın:

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