Devre dışı giriş metni rengi

95

Aşağıdaki basit HTML, Firefox ve WebKit tabanlı tarayıcılarda farklı şekilde görüntüleniyor (Safari, Chrome ve iPhone'da kontrol ettim).

Firefox'ta hem kenarlık hem de metin aynı renge sahiptir ( #880000), ancak Safari'de metin biraz daha açık hale gelir (sanki bir miktar saydamlık uygulanmış gibi).

Bunu bir şekilde düzeltebilir miyim (Safari'de bu saydamlığı kaldırın)?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    input:disabled{
        border:solid 1px #880000;
        background-color:#ffffff;
        color:#880000;
    }
    </style>
</head>
<body>
    <form action="">
        <input type="text" value="disabled input box" disabled="disabled"/>
    </form>
</body>
</html>

— Tesadüfen
kaynak

Bunu da fark ettim, benim için bu bir hata, çünkü arka plan rengi: girdinin beyazını koyduğunuzda rengi tekrar doğru şekilde gösterecektir. Ayrıca opaklığın çok az etkisi vardır. -Webkit-text-fill-color: # 880000 çalışacak olsa da

— Miguel

239

-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */

— Kemo
kaynak

51

Devre dışı bırakılan giriş kutumun normal bir kutu gibi görünmesini istedim. Safari Mobile'da çalışan tek şey budur. -webkit-metin-dolgu rengi: rgba (0, 0, 0, 1); -webkit-opaklık: 1; arka plan: beyaz;

— Ryan

11

@Ryan haklı - 1Mobil Safari için opaklık olarak ayarlanmalıdır .

— David Jones

7

opacity:1ayrıca gereklidir.

— Marcel Falliere

3

Safari'nin mevcut sürümlerinde 2016 Yazı itibarıyla

— Andy Mercer

2

Günümü kurtardım! Yine de öğenin placeholdermetin renginin rengini etkiler input. Bunun için de bir düzeltmeye ihtiyacınız olursa, şu bağlantıya bakın: css-tricks.com/almanac/selectors/p/placeholder

— Lentyai

43

Telefon ve Tablet webkit tarayıcıları (Safari ve Chrome) ve masaüstü IE, devre dışı bırakılmış girişleri biçimlendirmek istiyorsanız geçersiz kılmanız gereken, devre dışı bırakılmış form öğelerinde bir dizi varsayılan değişikliğe sahiptir.

-webkit-text-fill-color:#880000; /* Override iOS / Android font color change */
-webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
color:#880000; /* Override IE font color change */

— Lijinma
kaynak

6

bu ilginç bir soru ve devam edip edemeyeceğimi görmek için pek çok geçersiz kılmayı denedim ama hiçbir şey işe yaramıyor. Modern tarayıcılar, öğelerin nasıl görüntüleneceğini anlatmak için aslında kendi stil sayfalarını kullanır; bu nedenle, Chrome'un stil sayfasını bulabilirseniz, hangi stilleri zorladığını görebilirsiniz. Sonuçla çok ilgileneceğim ve eğer bir sonuca sahip değilseniz, daha sonra boşa harcayacak vaktim olduğunda onu aramak için biraz zaman harcayacağım.

Bilginize,

opacity: 1!important;

geçersiz kılmaz, bu yüzden opaklık olduğundan emin değilim.

— Steve Perks
kaynak

Teşekkürler! Bir açıklama bulamadım (Chrome'un kullanıcı aracısı stil sayfasında buna benzer bir şey yok - devre dışı bırakılmış girişler için yalnızca "background-color: rgb (235, 235, 228)") ve bir geçici çözüm kullanıyorum, ancak hala ne olduğunu merak ediyorum on ...

— Bu arada

Steve, çaban için teşekkürler, ama gelecekte bunu bir cevap olarak değil, bir yorum olarak göndermeni öneririm.

— avernet

6

Sen renk değiştirebilir #440000Safari için sadece, ama en iyi çözüm olacaktır imho değil düğmeye değişim görünüyor hiç . Bu şekilde, her platformdaki her tarayıcıda, kullanıcıların beklediği gibi görünecektir.

— Kornel
kaynak

6

GÜNCEL 2019:

Bu sayfadaki fikirleri bir "ayarla ve unut" çözümünde birleştirmek.

input:disabled, textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder {
  -webkit-text-fill-color: currentcolor; /* 1. sets text fill to current `color` for safari */
  opacity: 1; /* 2. correct opacity on iOS */
}

— paulcol.
kaynak

4

Devre dışı bırakılmış öznitelik yerine salt okunur özniteliğini kullanabilirsiniz, ancak daha sonra sözde sınıf girdisi olmadığı için bir sınıf eklemeniz gerekir: salt okunur.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button.readonly{
    border:solid 1px #880000;
    background-color:#ffffff;
    color:#880000;
}
</style>
</head>
<body>
<form action="">
    <button type="button" readonly="readonly" class="readonly">disabled input box</button>
</form>
</body>
</html>

Devre dışı bırakılmış bir giriş ile salt okunur girişin aynı olmadığına dikkat edin. Bir salt okunur girdinin odak noktası olabilir ve gönderildiğinde değerler gönderir. W3.org'a bakın

— Serxipc
kaynak

teşekkürler dostum, evet, bu benim de ilk fikrimdi, ancak odaklandığım için işe yaramıyor: iPhone'da, bir kullanıcı salt okunur bir öğeye dokunduğunda klavye açılıyor ve bu kafa karıştırıcı, geçici çözümümü buldum ve soru daha çok 'teorik' - neden bu davranış?

— Bu arada

İlginç bir çözüm: Odaklanma sorunu, özellikle ekran okuyucu kullanan kişiler için kullanılabilirlik sorunları da ortaya çıkarır. Çoğu durumda, kullanıcıların bir formdaki salt okunur / devre dışı bırakılmış alanlar için sekme yapmasını istemezsiniz.

— avernet

4

@ryan için

Devre dışı bırakılan giriş kutumun normal bir kutu gibi görünmesini istedim. Safari Mobile'da çalışan tek şey budur.

-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;

— vanduc1102
kaynak

3

Tüm engelli girişler için sorunu çözmek istiyorsanız, tanımlayabilirsiniz -webkit-text-fill-coloriçin currentcolorböylece, colorgiriş özelliği kullanılacaktır.

input[disabled] {
   -webkit-text-fill-color: currentcolor;
}

Safari'de o keman görün https://jsfiddle.net/u549yk87/3/

— Dondur
kaynak

2

Bu soru çok eski ama güncellenmiş bir webkit çözümü yayınlayacağımı düşündüm. Aşağıdaki CSS'yi kullanmanız yeterlidir:

input::-webkit-input-placeholder {
  color: #880000;
}

— ConceptDawg
kaynak

3

ve Firefox için şu girişi kullanın: -moz-placeholder

— stephan.com

1

eh .. bu yer tutucu özniteliği içindir, bunun devre dışı bırakılmış alanlar üzerinde bir etkisi olduğunu düşünmüyorum. @ -webkit-text-fill-color

— Kemo'nun

0

Giriş yerine düğme kullanabilir misiniz?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    button:disabled{
        border:solid 1px #880000;
        background-color:#ffffff;
        color:#880000;
    }
    </style>
</head>
<body>
    <form action="">
        <button type="button" disabled="disabled">disabled input box</button>
    </form>
</body>
</html>

gerçekten değil ... gerçek uygulamamda bu metin kutuları genellikle etkinleştirilir ve giriş için kullanılır ve yalnızca belirli koşullar altında JavaScript ile devre dışı bırakılırlar Bir geçici çözüm bulabilirim (<input /> 'u stilize <div> <ile değiştirin / div> 'devre dışı' olarak ayarlamak yerine) - ama gerçekten yanlış geliyor

— Tesadüfen