入力テキストの色を無効にしました

StackOverflow https://stackoverflow.com/questions/262158

質問

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

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

これを何らかの形で修正できますか（Safariでこの透明度を削除します）？

更新：
ご回答ありがとうございます。私は仕事のためにこれをもう必要としません（無効にする代わりに input 要素をスタイル付きの div 要素に置き換えます）が、なぜこれが起こるのか興味がありますこの動作を制御する方法があれば... 

<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>
役に立ちましたか？

解決 

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

他のヒント

電話およびタブレットの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 */

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

FYI、

opacity: 1!important;

上書きしませんので、不透明度はわかりません。

Safariの場合のみ色を＃440000 に変更できますが、IMHOの最良の解決策は、ボタンの外観をまったく変更しないことです。 。このようにして、すべてのプラットフォームのすべてのブラウザーで、ユーザーが期待するように見えます。

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

をご覧ください。

@ryanの場合

無効な入力ボックスを通常の入力ボックスのように見せたい。これがSafari Mobileで機能する唯一の方法です。

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

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

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

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

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

Safariでフィドルを見る https://jsfiddle.net/u549yk87/3/

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

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

<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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top