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?
html
css
css-selectors
Daphne
źródło
źródło
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.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.!important
powinno działać, aby nadpisać, chyba że masz również!important
na klasie ustawień?Odpowiedzi:
https://curtistimson.co.uk/post/css/style-readonly-attribute-css/
źródło
input[readonly]
zamiast jakreadonly
to logiczna atrybut, który nie jest przeznaczony do mają wartość konkretnego.readonly="readonly"
ze swojegoinput
żywiołu.Zauważ, że
textarea[readonly="readonly"]
działa, jeśli ustawiszreadonly="readonly"
w HTML, ale NIE działa, jeśli ustawiszreadOnly
-attribute natrue
lub"readonly"
za pośrednictwem JavaScript.Aby selektor CSS działał, jeśli ustawisz go za
readOnly
pomocą 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.
źródło
textarea[readonly]
zamiast tego -textarea[readonly="readonly"]
gwarantujemy, że każdy będzie pasował.Aby być bezpiecznym, możesz użyć obu ...
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łączanieinput[readonly="readonly"]
jest zbędne. Zobacz https://stackoverflow.com/a/19645203/1766230źródło
Mnóstwo odpowiedzi tutaj, ale nie widziałem tej, której używam:
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. Techniczniefalse
jest nieważny zgodnie ze specyfikacją, ale internet nie jest idealnym światem. Jeśli chcesz zająć się tą sprawą, możesz to zrobić:textarea
działa w ten sam sposób:Należy pamiętać, że html obsługuje nie tylko
type="text"
, ale zabił innych typów tekstowych takanumber
,tel
,email
,date
,time
,url
, itd. Każdy musiałby być dodawane do selektora.źródło
:read-only
i inne pseudo selektory zostały dodane do standardu W3C i mogą być używane z wersjami podglądu IE 10 10547 i nowszymi.Można to zrobić na kilka sposobów.
Pierwszy jest najczęściej używany. Działa na wszystkich głównych przeglądarkach.
Podczas gdy powyższy wybierze wszystkie wejścia z
readonly
dołączonymi, ten poniżej wybierze tylko to, czego chcesz. Pamiętaj, aby zastąpićdemo
dowolnym typem wejścia.To jest alternatywa dla pierwszej, ale nie jest często używana:
:read-only
Selektor jest obsługiwany w Chrome, Opera i Safari. Firefox używa:-moz-read-only
. IE nie obsługuje:read-only
selektora.Możesz również użyć
input[readonly="readonly"]
, ale jest to prawie to samo, coinput[readonly]
z mojego doświadczenia.źródło
Powinniśmy omówić wszystkie przypadki dla pola wejściowego tylko do odczytu ...
źródło
wielką literą Tylko
źródło
Jeśli wybierzesz wejście przez id, a następnie dodasz
input[readonly="readonly"]
tag w css, coś takiego:To nie zadziała. Musisz wybrać klasę nadrzędną lub identyfikator, a następnie dane wejściowe. Coś jak:
Moje 2 centy w oczekiwaniu na nowe bilety w pracy: D
źródło
Aby pracować we wszystkich przeglądarkach, użyj następujących poleceń:
źródło