web-dev-qa-db-ja.com

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

以下の単純な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>
iphonehtmlcsssafariwebkit
77
Incidently
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
186
Kemo

電話とタブレットの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 */
42
lijinma

Safariだけで色を#440000に変更することもできますが、IMHOの最良の解決策はnot toボタンの外観を変更するat all。このようにして、すべてのプラットフォームのすべてのブラウザーで、ユーザーが期待するように見えます。

6
Kornel

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

参考までに、

opacity: 1!important;

オーバーライドしないので、不透明度はわかりません。

6
Steve Perks

@ryanの

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

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

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 を見てください

4
Serxipc

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

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

Safariでそのフィドルをご覧ください https://jsfiddle.net/u549yk87/3/

2
Freez

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

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

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 */
}
2
paulcol.

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

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