117

以下の単純な 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>

4

10 に答える 10

274 
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
于 2011-01-10T15:21:54.340 に答える
45

携帯電話とタブレットの 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 */
于 2014-05-07T07:20:59.953 に答える
6

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

ご参考までに、

opacity: 1!important;

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

于 2008-11-04T23:22:57.410 に答える
6

Safari だけに色を変更することもできますが、ボタンの外観をまったく変更しないこと#440000が最善の解決策です。このようにして、すべてのプラットフォームのすべてのブラウザーで、ユーザーが期待するように表示されます。

于 2008-11-05T00:00:23.343 に答える
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を見てください

于 2008-11-05T16:27:44.270 に答える
2

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

input::-webkit-input-placeholder {
  color: #880000;
}
于 2010-06-01T16:09:23.647 に答える
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>
于 2008-11-04T16:56:21.373 に答える