Jak stylizować atrybut tylko do odczytu za pomocą CSS?


150

Obecnie używam readonly = "readonly" do wyłączania pól. Teraz próbuję stylizować atrybut za pomocą CSS. Próbowałem użyć

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

ale z jakiegoś powodu nie działa. Ja też próbowałem

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

to też nie działa.

Jak ustawić styl atrybutu tylko do odczytu za pomocą CSS?


12
input[readonly]powinno działać. Upewnij się, że nie jest zastępowana przez inne, bardziej szczegółowe selektory w innym miejscu w arkuszu stylów.
BoltClock

1
jeśli chcesz wyłączyć, użyj atrybutu disabled i nie tylko do odczytu
Sven Bieder

3
@SvenBieder Tylko do odczytu i wyłączone mają zupełnie inne zachowanie. Pola tylko do odczytu wysyłane do serwera podczas przesyłania formularza, podczas gdy pola wyłączone nie są.
Naren

3
input[readonly='readonly']będzie działać tylko wtedy, gdy używasz HTML <input readonly="readonly">, a nie np <input readonly>. input[readonly]powinien pasować do obu.
Mathias Bynens,

1
!importantpowinno działać, aby nadpisać, chyba że masz również !importantna klasie ustawień?
Matt K

Odpowiedzi:


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

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


24
Należy użyć input[readonly]zamiast jak readonlyto logiczna atrybut, który nie jest przeznaczony do mają wartość konkretnego.
BoltClock

1
@BoltClock Tak. Zobacz rozwiązanie w odpowiedzi poniżej.
Pal R

Jak mogę przywrócić możliwość zapisu? Po prostu usuwasz styl klasowy?
Renaro Santos

@RenaroSantos To zmiana HTML. Usuń readonly="readonly"ze swojego inputżywiołu.
Curt,

w / IE7 nadal możesz używać selektora z jQuery
ladieu

69

Zauważ, że textarea[readonly="readonly"]działa, jeśli ustawisz readonly="readonly"w HTML, ale NIE działa, jeśli ustawisz readOnly-attribute na truelub "readonly"za pośrednictwem JavaScript.

Aby selektor CSS działał, jeśli ustawisz go za readOnlypomocą JavaScript , musisz go użyć textarea[readonly].

To samo zachowanie w przeglądarkach Firefox 14 i Chrome 20.

Aby być po bezpiecznej stronie, używam obu selektorów.

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

18
Równie dobrze możesz po prostu użyć textarea[readonly]zamiast tego - textarea[readonly="readonly"]gwarantujemy, że każdy będzie pasował.
BoltClock

23

Aby być bezpiecznym, możesz użyć obu ...

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

Atrybut tylko do odczytu to „atrybut logiczny”, który może być pusty lub „tylko do odczytu” (jedyne prawidłowe wartości). http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

Jeśli używasz czegoś takiego jak .prop('readonly', true)funkcja jQuery , będziesz potrzebować [readonly], podczas gdy jeśli używasz .attr("readonly", "readonly"), będziesz potrzebować [readonly="readonly"].


Korekta: wystarczy użyć input[readonly]. Włączanie input[readonly="readonly"]jest zbędne. Zobacz https://stackoverflow.com/a/19645203/1766230


20

Mnóstwo odpowiedzi tutaj, ale nie widziałem tej, której używam:

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

Zwróć uwagę na myślnik w pseudo selektorze. Jeśli dane wejściowe są readonly="false"takie, to również to wychwycą, ponieważ ten selektor wychwytuje obecność tylko do odczytu, niezależnie od wartości. Technicznie falsejest nieważny zgodnie ze specyfikacją, ale internet nie jest idealnym światem. Jeśli chcesz zająć się tą sprawą, możesz to zrobić:

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

textarea działa w ten sam sposób:

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

Należy pamiętać, że html obsługuje nie tylko type="text", ale zabił innych typów tekstowych taka number, tel, email, date, time, url, itd. Każdy musiałby być dodawane do selektora.


2
Ja też nie. LOL Tak, masz rację! Na razie. :read-onlyi inne pseudo selektory zostały dodane do standardu W3C i mogą być używane z wersjami podglądu IE 10 10547 i nowszymi.
IAmNaN

6

Można to zrobić na kilka sposobów.

Pierwszy jest najczęściej używany. Działa na wszystkich głównych przeglądarkach.

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

Podczas gdy powyższy wybierze wszystkie wejścia z readonlydołączonymi, ten poniżej wybierze tylko to, czego chcesz. Pamiętaj, aby zastąpić demodowolnym typem wejścia.

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

To jest alternatywa dla pierwszej, ale nie jest często używana:

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

:read-onlySelektor jest obsługiwany w Chrome, Opera i Safari. Firefox używa :-moz-read-only. IE nie obsługuje :read-onlyselektora.

Możesz również użyć input[readonly="readonly"], ale jest to prawie to samo, co input[readonly]z mojego doświadczenia.


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

Powinniśmy omówić wszystkie przypadki dla pola wejściowego tylko do odczytu ...


input: read-only to "pseudoklasa zmienności mająca na celu ułatwienie stylowania formularzy w oparciu o wyłączone, tylko do odczytu i edytowalne atrybuty HTML". Jak wspomniano tutaj, css-tricks.com/almanac/selectors/r/read-write-read , różne implementacje są dość wątłe.
peater

To dziwne, ale tylko wejście [tylko do odczytu] działało dla mnie w FF 58
Pavel_K

3

wielką literą Tylko

input[readOnly] {
      background: red !important;
    }
<input type="text" name="country" value="China" readonly="readonly" />


2

Jeśli wybierzesz wejście przez id, a następnie dodasz input[readonly="readonly"]tag w css, coś takiego:

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

To nie zadziała. Musisz wybrać klasę nadrzędną lub identyfikator, a następnie dane wejściowe. Coś jak:

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

Moje 2 centy w oczekiwaniu na nowe bilety w pracy: D


„Jeśli wybierzesz wejście za pomocą identyfikatora” - którego PO nie jest, jak to ma znaczenie? Nawet jeśli tak było, mylisz się, wystarczy usunąć kombinator potomny.
Quentin,

AH ok, masz na myśli, że muszę wpisać coś takiego jak input [readonly = "readonly"] # inputID? / me głupcze .. masz rację
programowa

1

Aby pracować we wszystkich przeglądarkach, użyj następujących poleceń:

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

2
Miej więc nadzieję, że Twoi docelowi odbiorcy nie są w tych 2%.
Bacco

Co obejmuje klasa „zablokowana”?
AdiT

$ ('. textBoxClass'). addClass ('locked') będzie zawierać słowo 'locked'
Pal R
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.