無効な入力テキストの色

93

以下の単純なHTMLは、FirefoxとWebKitベースのブラウザーでは異なって表示されます（私はSafari、Chrome、iPhoneでチェックインしました）。

Firefoxでは境界線とテキストの両方が同じ色（#880000）ですが、Safariではテキストが少し明るくなります（透明度が適用されているかのように）。

どういうわけかこれを修正できますか（Safariでこの透明度を削除します）？

<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>

— ちなみに
ソース

入力にbackground-color：whiteを入力すると、色が正しく表示されるため、これもバグです。また、不透明度はほとんど効果がありません。-webkit-text-fill-color：＃880000は機能しますが、

— ミゲル

235

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

— ケモ
ソース

51

無効にした入力ボックスを通常のボックスのように見せたいと思いました。これはSafari Mobileで機能する唯一のものです。-webkit-text-fill-color：rgba（0、0、0、1）; -webkit-opacity：1; 背景：白;

— ライアン

11

@Ryanは正解です。MobileSafariでは不透明度を設定する必要があります1。

— David Jones

7

opacity:1も必要です。

— Marcel Falliere、2015

3

2016

— Andy Mercer

2

私の日を救った！ただしplaceholder、input要素のテキストの色の色にも影響します。それに対する修正も必要な場合は、このリンクを参照してください：css-tricks.com/almanac/selectors/p/placeholder

— Lentyai

43

電話とタブレットのWebkitブラウザー（SafariとChrome）とデスクトップIEには、無効なフォーム要素に対する多くのデフォルトの変更があり、無効な入力のスタイルを設定する場合はオーバーライドする必要があります。

-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
ソース

6

これは興味深い質問です。たくさんのオーバーライドを試して、うまくいくかどうかを確認しましたが、何も機能しません。最新のブラウザーは実際に独自のスタイルシートを使用して要素の表示方法を指示します。そのため、Chromeのスタイルシートを嗅ぐことができれば、どのスタイルが強制されているかを確認できます。私は結果に非常に興味があります。もしあなたがそれを持っていないなら、私が後で時間を費やす時間があるときに私がそれを探して少し時間を費やすつもりです。

ご参考までに、

opacity: 1!important;

上書きしないので、不透明かどうかはわかりません。

— スティーブ・パークス
ソース

ありがとう！説明を見つけることができず（Chromeのユーザーエージェントスタイルシートにはそのようなものはありません-無効な入力の場合は「background-color：rgb（235、235、228）」のみ）、回避策を使用していますが、それでも何が起こっているのか興味がありますオン...

— 偶然、

スティーブ、努力をありがとう、しかし私は将来的にこれを答えではなくコメントとして投稿することをお勧めします。

— avernet 2010年

6

あなたはに色を変えることができる#440000だけでSafariのための、しかし、私見では最善の解決策は次のようになりますしないボタンの外観を変更するすべてで。このようにして、すべてのプラットフォームのすべてのブラウザーで、ユーザーが期待するように見えます。

— コーネル
ソース

5

更新された2019：

このページのアイデアを「設定して忘れる」ソリューションに組み合わせる。

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 */
}

— ポールコル。
ソース

4

disabled属性の代わりにreadonly属性を使用できますが、疑似クラスinput：readonlyがないため、クラスを追加する必要があります。

<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>

無効な入力と読み取り専用入力は同じではないことに注意してください。読み取り専用の入力はフォーカスを持つことができ、送信時に値を送信します。w3.orgを見てください

— Serxipc
ソース

うん、ありがとう、これも私の最初のアイデアでしたが、フォーカスがあるのでうまくいきません。iPhoneでは、ユーザーが読み取り専用の要素をタップするとキーボードがポップアップします。質問はむしろ「理論的」です-なぜこのような振る舞いですか？

— 偶然、

興味深い回避策：フォーカスの問題は、特にスクリーンリーダーを使用するユーザーにとって、使いやすさの問題も引き起こします。ほとんどの場合、ユーザーがフォーム内の読み取り専用/無効なフィールドにタブで移動できるようにしたくないだけです。

— avernet 2010年

4

@ryan

無効にした入力ボックスを通常のボックスのように見せたいと思いました。これはSafari Mobileで機能する唯一のものです。

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

— vanduc1102
ソース

3

無効になっているすべての入力の問題を修正する場合は、をに定義する-webkit-text-fill-colorとcurrentcolor、color入力のプロパティが使用されます。

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

Safari https://jsfiddle.net/u549yk87/3/でそのフィドルを参照してください

— フリーズ
ソース

2

この質問は非常に古いですが、更新されたWebkitソリューションを投稿するつもりでした。次のCSSを使用するだけです。

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

— コンセプト
ソース

3

Firefoxの場合は、input：-moz-placeholderを使用してください

— stephan.com

1

ええと、これはプレースホルダ属性用であり、無効化されたフィールドには影響がないと思います。-webkit-text-fill-color

— @Kemoの

0

入力の代わりにボタンを使用できますか？

<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>

実際にはそうではありません...実際のアプリケーションでは、これらのテキストボックスは通常有効になっていて入力に使用され、特定の条件下でのみJavaScriptで無効にされます（<input />をスタイル付きの<div> <で置き換えるなど、回避策を見つけることができます/ div>「無効」を設定する代わりに）-しかし、それは本当に間違っていると感じています

— 偶然にも